react app browser proxy with http-proxy-middleware

Question

I've got problem with proxy in react app. Target: I've got two react apps, first app is on localhost:3000 and second on localhost:3001. What I want? => When in first app I'll click on:

<a href="/app2">
<button>Second App Open</button>
</a>

Then url will change from localhost:3000 into localhost:3000/app2 and second react app show what has got in url localhost:3001.

I imported http-proxy-middleware library and create in src direction file setupProxy.js and inside:

const {createProxyMiddleware} = require("http-proxy-middleware");

module.exports = function(app) {
    app.use(
        createProxyMiddleware('/app2',{
            target: 'http://localhost:3001',
            changeOrigin: true,
            prependPath: false,
            secure: false,
            logLevel: 'debug',
            ws:true
        })
    );
app.listen(3000)
};

Anyone could help me with this?

Also I tried this code in setupProxy.js:

const express = require('express')
const {createProxyMiddleware} = require("http-proxy-middleware");
app = express()
    app.use(
        createProxyMiddleware('/app2',{
            target: 'http://localhost:3001',
            changeOrigin: true,
            prependPath: false,
            secure: false,
            logLevel: 'debug',
            ws:true
        })
    );
app.listen(3000)

But then I've received error that require(...) is not a function oraz that express is not a function, when I take express into {} then also occurs error.

score 0 · Answer 1 · answered Jul 01 '21 at 09:42

I know it's late and I came across the same issue. Keeping what worked for me so that others can give it a try.This code is tested for react app created with create-react-app.

I proxied this endpoint - https://services.odata.org/V2/Northwind/Northwind.svc/Customers?$format=json

setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = (app) => {
    app.use(createProxyMiddleware('/api2', {
        target: 'https://services.odata.org/V2/Northwind/Northwind.svc/',
        changeOrigin: true,
        pathRewrite: { '^/api2': '' }
    })
    );
}

Your .js file

triggerCORSCall() {
    axios.get(`/api2/Customers?$format=json`)
      .then(response => {
        alert('Success');
      }).catch(error => {
        alert('Failure');
        console.log(error);
      })
  }

react app browser proxy with http-proxy-middleware

1 Answers1