Question

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

自http-proxy-middleware的{{3}}起，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 2

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

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

Answer 3

找到了这个答案-和预期的一样，这是一个简单的错误。

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

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

他们应该曾经是：

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

问题解决了！

创建React App http-proxy-middleware不起作用

3 个答案: