创建 React App http-proxy-middleware 不工作

Question

所以我使用 http-proxy-middleware 在我的 create-react-app 应用程序上设置了我的代理。我确定我已按照信中的说明进行操作，但每次我尝试单击相关 link.

时，我总是收到 404

我正在使用 create-react-app v3.2。

这是我的 setupProxy.js 文件：

const proxy = require("http-proxy-middleware");

module.exports = function(app) {
    app.use(proxy("/api", { target: "http://localhost:3090" }));
};

这是发出 http 请求的动作创建者

export const signIn = formProps => async dispatch => {
    try {
        const response = await axios.post("/api/login", formProps);

        //.....etc, etc
    } catch(e) {

        //.....etc,etc
    }
}

这是我的快递服务器上的相关路线：

app.post("/login", requireSignIn, Authentication.login);

当开发服务器启动时，我收到以下消息：

[HPM] Proxy created: /api  -> http://localhost:3090

所以 setupProxy.js 显然是被 CRA 收走了，但是哪里出了问题。我试过在代理设置中添加通配符（例如“/api/*”）但没有成功。我在客户端的控制台中记录了以下 404：

POST http://localhost:3000/api/login 404 (Not Found)

指的是 localhost:3000，表明代理（应该重定向到 localhost:3090）没有被使用。

我不禁想到我在这里遗漏了一些非常简单的东西，但目前我正在努力尝试让它发挥作用。

如有任何帮助，我们将不胜感激。

谢谢！

Answer 1

找到了这个问题的答案 - 正如预期的那样，这是一个简单的错误。

我的快递服务器上的路线如下：

app.post("/login", requireSignIn, Authentication.login);

而他们应该是：

app.post("api/login", requireSignIn, Authentication.login);

问题已解决！

Answer 2

从 http-proxy-middleware 的 v1.0.0 开始，setupProxy.js 文件需要显式导入；所以而不是以前的默认导入

const proxy = require("http-proxy-middleware");

您需要使用：

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

module.exports = function(app) {
    app.use(createProxyMiddleware("/api", { target: "http://localhost:3090" }));
};

Answer 3

替换setupProxy.js文件的代码如下：

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

创建 React App http-proxy-middleware 不工作

Create React App http-proxy-middleware not working

node.js

express

reactjs

create-react-app

http-proxy-middleware