setupProxy is not working - http-proxy-middleware

Question

My react app is up on localhost:3000 and node server is running on localhost:5000. When I am trying to connect to the express API the route is going to 'localhost:3000/auth/google' instead of localhost:5000/auth/google

UserAction.js

export const updateLoginUser = (userData, scheme) => async dispatch => {
console.log(scheme);
if(scheme === 'google') {
    // TODO: fetch user from the DB
    const fetchedUser = await axios.post('/auth/google');
    dispatch({
        type: UPDATE_USER, 
        payload: fetchedUser.data
    })
} else {
    // TODO: fetch user from the DB
    const fetchedUser = await axios.post('/api/get_user/', {
        method: 'POST',
        headers: {
            'content-type': 'application/json'
        },
        body: JSON.stringify(userData)
    })
    dispatch({
        type: UPDATE_USER, 
        payload: fetchedUser.data
    })
}

}

setupProxy.js

 const proxy = require('http-proxy-middleware')
module.exports = function(app) {
    app.use(proxy('/auth/google', { target: 'http://localhost:5000' }))
}

NODE server.js

const express = require('express');
const mongoose = require('mongoose');
const keys = require('./config/keys');
const cookieSession = require('cookie-session');
const passport = require('passport');
const cors = require('cors');
const morgan = require('morgan');

require('./models/Users');
require('./services/passport'); // it is not returing anything hence no need of assigning

mongoose.connect(keys.mongoDBURI, { useNewUrlParser: true, useUnifiedTopology: true });

const app = express();
app.use(cors());

// Setup the cookie session
app.use(cookieSession({
    maxAge: 30 * 24 * 60 * 1000, // Time till the cookie will be alive
    keys: [keys.cookieKey]
}));


app.use(morgan('combined'));
// Make passport know to use the cookieSession
app.use(passport.initialize());
app.use(passport.session());

require('./routes/authRoutes')(app); // authRoute returing a function and we are immediatly invoking that function

const PORT = process.env.PORT || 5000;
app.listen(5000);

EDIT: react package.json

{
  "name": "blogpost-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.19.0",
    "http-proxy-middleware": "^0.20.0",
    "node-sass": "^4.13.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-redux": "^7.1.3",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.2.0",
    "redux": "^4.0.4",
    "redux-thunk": "^2.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "http://localhost:5000"
}

I am new to this hence I do not know how exactly proxy works.

Answer 1

you may need to rewrite your setupProxy.js as below

 const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { app.use( '/api', createProxyMiddleware({ target: 'http://localhost:5000', changeOrigin: true, }) ); };

then do a npm install.

In my case that resolved the issue. here you can see more details https://create-react-app.dev/docs/proxying-api-requests-in-development/ Also there it is mentioned as Note: This file only supports Node's JavaScript syntax. Be sure to only use supported language features (ie no support for Flow, ES Modules, etc).

Answer 2

这样做的方法是在 app.get('/what-here', ....) 中使用你在 express 中使用的路由你也在 setupProxy.js 中使用 function (app){ app.use('/ what-here', createproxyMiddleware({ target: URL, change origin:true})。what-here 附加到 URL，并且 URL 代理到客户端应用程序使用的前端 URL。也就是说，如果客户端位于localhost:3000 ant 服务器在 localhost:5000 请求然后在 localhost:5000/what-here 但它显示为 localhost:3000/what-here 给客户端。错误是在 express 然后使用不同的名称setupProxy

Answer 3

I had the same problem. The problem is not the setupProxy.js, the problem is that the path to which axios is posting does not exist in the backend. This can be caused by a mispelling in the backend route.
Ensure the backend route path is the same as the frontend post path.
First ensure your setupProxy.js looks like this:

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

and the axios.post starts with /api,mine was:

await axios.post("/api/conversion/convert", data);

I was posting using axios.post('/api/conversion/convert') but my express backend had a post route 'api/convertion/convert' which was a typo on my part (convertion instead of conversion) which made axios post to 3000 instead of 5000.
I don't know what kind of a bug is this, axios posting to 3000 instead of 5000 for mismatch in the backend route. The expected behavior is that it should post to 5000/wrong-post-path for easier debugging.

PS Please upvote if this solves your problem. I am new to answering question and the upvote would really boost my account.

Answer 4

i think you forgot to add first part of app.listen(api, proxy()) and you have only proxy method, am problem may be that you didn't specified which url/path to go through proxy.

var express = require('express');
var proxy = require('http-proxy-middleware');

var app = express();

app.use(
  '/api', // you miss this part in your server code
  proxy({ target: 'http://www.example.org', changeOrigin: true })
);
app.listen(3000);

// http://localhost:3000/api/foo/bar -> http://www.example.org/api/foo/bar