代码之家 › 专栏 › 技术社区 › VladoDemcak

React在包中创建应用程序代理。json在Windows上速度较慢

http-proxy package.json reactjs node.js javascript

VladoDemcak · 技术社区 · 7 年前

我们在中定义了代理 package.json 在我们的react应用程序中(创建为create react app)。在开发过程中,我们在前端(webpack)和后端(express)之间使用代理作为 described here . 下面是我们定义后端服务器代理的部分( 包裹json :

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

在后端(服务器在端口上运行 3001 )我们调用另一个API(但我认为这并不重要,只是一个注释)。我注意到从webpack(create react app)到express(backed)的代理调用非常慢。(Windows操作系统)

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

正如您所看到的,代理调用(端口3000)和直接调用(端口3001)之间的时间差非常大。我以为会耽搁,但这看起来很奇怪。

而且 有时是大型JSON响应( ~38KB )来自代理已断开 (无效-例如缺少响应的某些部分或交换的字符-在 30%+ 案例)。我一直在努力解决后端方面的相同问题 我想我已经和我设置的代理解决了 keep-alive 联系

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

我也试着让特工进来 包裹json 但没有成功。 create react app documentation 说:

您还可以指定http代理中间件或http代理支持的任何配置值。

和 http-proxy documentation 说

代理:要传递给http的对象。请求(请参阅节点的https代理和http代理对象)

是否可以在中定义代理 包裹json ?

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

TypeError:代理选项必须是类代理对象、未定义或错误。在新的客户端请求中(\u http\u client.js:106:11)

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

高度赞赏任何建议或想法。

1 回复 | 直到 7 年前

VladoDemcak 7 年前

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

我们被迫使用 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 但响应时间约为150ms-230ms (而且!没有无效的JSON)现在最重要的是。

令人不安的注释来自 react-app-rewired 我想指出:

通过这样做 你打破了“ guarantees “CRA提供 . 也就是说,您现在“拥有”配置。不会提供任何支持。小心操作。

我已经报告了 issue so further investigation will be there.