package.json 中的 React create app proxy agent 在 Windows 中运行缓慢

Question

我们在我们的 React 应用程序中 package.json 中定义了代理（创建为 create-react-app。我们在开发期间在前端 (webpack) 和后端 (express) 之间使用代理 described here。这是我们定义后端服务器代理的部分（package.json:

  "scripts": {
    ...
  },
  "proxy": "http://localhost:3001"
}

在后端（服务器在端口 3001 上运行）我们调用另一个 API（但我认为这并不重要，只是一个注释）。我注意到从 webpack (create-react-app) 到 express (backed) 的代理调用真的很慢。 (Windows OS)

GET http://localhost:3000/endpoint/ -> ~600ms - 900ms
GET http://localhost:3001/endpoint/ -> ~150ms - 250ms

如您所见，代理调用（端口 3000）和直接调用（端口（3001））之间的时间差异非常大。我预计会有延迟，但这看起来很奇怪。

另外 有时来自代理的大 JSON 响应 (~38KB) 已损坏 （无效 - 例如缺少响应的某些部分或交换字符 - 在30%+ 例）。我一直在后端遇到同样的问题，我想我已经通过设置 keep-alive 连接的代理解决了它。

您知道为什么或如何改善代理时间和行为吗？

我也尝试在 package.json 中设置代理但没有成功。 create react app documentation 说：

You may also specify any configuration value http-proxy-middleware or http-proxy supports.

并且http-proxy documentation说

agent: object to be passed to http(s).request (see Node's https agent and http agent objects)

是否可以在package.json中定义代理？

我试过了，但出现以下错误

TypeError: Agent option must be an Agent-like object, undefined, or false. at new ClientRequest (_http_client.js:106:11)

"proxy": {
    "/": {
      "target": "http://localhost:3001",
      "agent": { "keepAlive": true }
    }
  }

非常感谢任何建议或想法。

Answer 1

为我的问题添加答案，以防有人遇到与我们相同的问题。

我们被迫使用 react-app-rewired 作为自定义代理。遗憾的是我们无法为 devServer 代理设置自定义代理。

如果您需要为 devServer 更改代理，documentation 中的解释非常好。

// config-overrides.js
module.exports = {
  devServer: function(configFunction) {
    return function(proxy, allowedHost) {
      const config = configFunction(proxy, allowedHost);
      config.proxy.forEach(p => {
        p.agent = agent;
      });
      return config;
    };
  }
}

我想这是解决方法，可能在 create-react-app 的未来版本中不受支持，但响应时间约为 150 毫秒 - 230 毫秒 （并且！没有无效的 JSON）并且它是现在最重要的事情。 .

来自 react-app-rewired 的令人不安的留言我想指出：

By doing this you're breaking the "guarantees" that CRA provides. That is to say you now "own" the configs. No support will be provided. Proceed with caution.

我已举报issue so further investigation will be there.

package.json 中的 React create app proxy agent 在 Windows 中运行缓慢

React create app proxy agent in package.json is slow on Windows

javascript

http-proxy

node.js

reactjs

package.json