[英]React create app proxy agent in package.json is slow on Windows
We have proxy defined in package.json
in our react application (created as create-react-app. We use proxy between front-end (webpack) and back-end (express) during development as described here . Here is the part where we define proxy to the backend server ( package.json
: 我们在react应用程序(作为create-react-app创建)的package.json
中定义了代理。我们在开发过程中使用前端(webpack)和后端(express)之间的代理,如此处所述 。定义到后端服务器的代理( package.json
:
"scripts": {
...
},
"proxy": "http://localhost:3001"
}
On the backend side (server runs on port 3001
) we call another APIs (but I think it's not important just a note). 在后端(服务器在端口3001
上运行),我们调用了另一个API(但是我认为这只是一个注释并不重要)。 I have noticed that proxy calls from webpack (create-react-app) to express (backed) are really slow. 我注意到从webpack(create-react-app)进行代理请求以表达(支持)的速度非常慢。 (Windows OS) (Windows作业系统)
GET http://localhost:3000/endpoint/ -> ~600ms - 900ms
GET http://localhost:3001/endpoint/ -> ~150ms - 250ms
As you can see the time differences between proxy calls (port 3000) and direct calls - port (3001) - are really huge. 如您所见,代理调用(端口3000)和直接调用之间的时间差-端口(3001)非常大。 I expected delay but this looks weird. 我预计会有延迟,但这看起来很奇怪。
Also sometimes large JSON response ( ~38KB
) from proxy is broken (invalid - eg missing some parts of a response or swapped characters - in 30%+
cases). 同样, 有时来自代理的大JSON响应( ~38KB
)被破坏 (无效-例如,丢失响应的某些部分或交换字符-在30%+
情况下)。 I have been struggling with the same issue on backend side and I think I have resolved it with proxy-agent where I set keep-alive
connection. 我一直在后端解决相同的问题, 我想我已经通过设置keep-alive
连接的proxy-agent解决了它。
Do you have any idea why or how to improve proxy time and behavior? 您是否知道为什么或如何改善代理时间和行为?
Also I tried to set agent in package.json
but without success. 我也尝试在package.json
设置代理,但没有成功。 create react app documentation says: 创建react app文档说:
You may also specify any configuration value http-proxy-middleware or http-proxy supports. 您也可以指定任何配置值http-proxy-middleware或http-proxy支持。
And http-proxy documentation says 而且http-proxy文档说
agent: object to be passed to http(s).request (see Node's https agent and http agent objects) agent:传递给http.squest的对象(请参阅Node的https代理和http代理对象)
Is it possible to define agent in package.json
? 是否可以在package.json
定义代理?
I tried but I got following error 我尝试过,但出现以下错误
TypeError: Agent option must be an Agent-like object, undefined, or false. TypeError:Agent选项必须是类似Agent的对象,未定义或为false。 at new ClientRequest (_http_client.js:106:11) 在新的ClientRequest(_http_client.js:106:11)
"proxy": {
"/": {
"target": "http://localhost:3001",
"agent": { "keepAlive": true }
}
}
Highly appreciate any suggestion or idea. 高度赞赏任何建议或想法。
Adding answer for my question in case somebody has the same issue as we had. 如果有人遇到与我们相同的问题,请为我的问题添加答案。
We are forced to use react-app-rewired for custom agent. 我们被迫将react-app-rewired用于自定义代理。 It's sad that we were not able to set our custom agent for devServer
proxy. 令人遗憾的是,我们无法为devServer
代理设置自定义代理。
If you need to change agent for devServer it's really nice explained in documentation . 如果您需要为devServer更改代理,这在文档中进行了很好的解释。
// 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;
};
}
}
I guess it's workaround and potentially not supported in a future releases of create-react-app
but response time is around 150ms - 230ms (AND! without invalid JSONs) and it's the thing that counts right now. 我猜这是一种解决方法,可能在以后的create-react-app
的将来版本中不支持, 但响应时间大约为150ms-230ms (AND!没有无效的JSON),这才是当下重要的事情。 . 。
Disturbing note from react-app-rewired
I would like to point out: 我想指出的是来自react-app-rewired
令人不安的笔记:
By doing this you're breaking the " guarantees " that CRA provides . 这样做会破坏CRA提供的“ 保证 ” 。 That is to say you now "own" the configs. 也就是说,您现在“拥有”配置。 No support will be provided. 不提供任何支持。 Proceed with caution. 请谨慎操作。
I have reported issue so further investigation will be there. 我已报告问题,因此将进行进一步调查。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.