setupProxy 不工作 - http-proxy-middleware

Question

我的反应应用程序在 localhost:3000 上运行，节点服务器在 localhost:5000 上运行。 当我尝试连接到 express API 时，路由将转到 'localhost:3000/auth/google' 而不是 localhost:5000/auth/google

用户操作.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' }))
}

节点服务器.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);

编辑：反应 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"
}

我是新手，因此我不知道代理的工作原理。

Answer 1

你可能需要重写你的 setupProxy.js 如下

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

然后进行 npm 安装。

在我的情况下，解决了这个问题。 在这里你可以看到更多细节https://create-react-app.dev/docs/proxying-api-requests-in-development/还有它被提到注意：这个文件只支持 Node 的 JavaScript 语法。 确保只使用受支持的语言功能（即不支持 Flow、ES 模块等）。

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

我有同样的问题。 问题不是 setupProxy.js，问题是 axios 发布的路径在后端不存在。 这可能是由后端路由中的拼写错误引起的。
确保后端路由路径与前端 post 路径相同。
首先确保您的 setupProxy.js 看起来像这样：

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

axios.post 以 /api 开头，我的是：

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

我正在使用 axios.post('/api/conversion/convert') 发布，但我的快递后端有一个发布路线 'api/convertion/convert' 这是我的错字（转换而不是转换），它使 axios 发布到3000 而不是 5000。
我不知道这是一个什么样的错误， axios 发布到 3000 而不是 5000 因为后端路由不匹配。 预期的行为是它应该发布到 5000/wrong-post-path 以便于调试。

PS如果这解决了您的问题，请点赞。 我是回答问题的新手，赞成票真的会增加我的帐户。

Answer 4

我认为您忘记添加app.listen(api, proxy())的第一部分并且您只有proxy方法，问题可能是您没有指定要通过代理的 url/路径。

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