时间戳

首页 > 解决方案 > 创建 React App http-proxy-middleware 不工作

node.js - 创建 React App http-proxy-middleware 不工作

问题描述

所以我已经在我的create-react-app应用程序上使用http-proxy-middleware. 我确定我已按照信中的说明进行操作，但每次尝试单击相关链接时都会收到 404。

我正在使用create-react-appv3.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未使用代理（应重定向到 ）。

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

任何帮助将非常感激。

谢谢！

标签： node.jsreactjsexpresscreate-react-apphttp-proxy-middleware

解决方案

从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" }));
};

推荐阅读