node.js - 创建 React 应用程序 http-proxy-middleware 不工作

Question

因此，我使用 http-proxy-middleware 在我的 create-react-app 应用程序上设置了代理。我确信我已严格按照说明进行操作，但每次尝试单击相关链接时，我都会收到 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
    }
}

这是我的 Express 服务器上的相关路由:

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

截至v1.0.0 http-proxy-middleware 中，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" }));
};