如何在使用Webpack开发服务器和HMR时代理WebSocket请求？
我正在使用Webpack构建一个React前端，同时将后端作为一个单独的进程运行，并使用Webpack dev服务器代理对它的请求。常规API很好地请求代理，但是当我尝试使用ws: true选项添加任何代理时，在本地主机上加载Webpack dev服务器所提供的页面后，我将开始获得以下错误并每秒钟重复堆栈跟踪。
<i> [webpack-dev-server] [HPM] Upgrading to WebSocket
<e> [webpack-dev-server] [HPM] WebSocket error: Error [ERR_STREAM_WRITE_AFTER_END]: write after end
<e> at new NodeError (node:internal/errors:372:5)
<e> at _write (node:internal/streams/writable:319:11)
<e> at Socket.Writable.write (node:internal/streams/writable:334:10)
<e> at Sender.sendFrame (C:\code\line-up\line-up-client\node_modules\ws\lib\sender.js:469:20)
<e> at Sender.close (C:\code\line-up\line-up-client\node_modules\ws\lib\sender.js:197:12)
<e> at WebSocket.close (C:\code\line-up\line-up-client\node_modules\ws\lib\websocket.js:300:18)
<e> at Receiver.receiverOnConclude (C:\code\line-up\line-up-client\node_modules\ws\lib\websocket.js:1114:18)
<e> at Receiver.emit (node:events:527:28)
<e> at Receiver.controlMessage (C:\code\line-up\line-up-client\node_modules\ws\lib\receiver.js:582:14)
<e> at Receiver.getData (C:\code\line-up\line-up-client\node_modules\ws\lib\receiver.js:429:42) {
<e> code: 'ERR_STREAM_WRITE_AFTER_END'
<e> }我的代理配置如下：
proxy: {
'/api/*': {
target: 'http://localhost:5150',
pathRewrite: { '^/api': '' },
},
'/ws': {
target: 'ws://localhost:5150',
ws: true,
}
},我的后端侦听http://localhost:5150上的常规HTTP请求，WebSocket端点位于localhost:5150/ws。
我尝试过的事情：
protocol.
- Setting
- 将
/ws代理的目标设置为使用http/ws，这是/ws代理的目标，以转到两个代理objects.
- Various other permutations.
上的/ws /ws ws: true
我的客户端源代码不是启动失败的WebSocket连接的那个，该代码被删除，错误仍然存在。
我的package.json摘录了相关版本：
"webpack": "^5.72.1",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.9.0"编辑：
结果，错误循环来自于我试图代理Webpack开发服务器用于执行HMR的路径。将配置和端点更改为使用/websocket而不是/ws，并将代理更改为：
'/websocket': {
target: 'http://localhost:5150',
ws: true,
}我在客户端得到一个Websocket连接错误。我有一个静态的普通JS页面，我用它来测试没有Webpack的后端，它工作得很好，所以我想问题就在Webpack/客户端代码的某个地方。
回答 1
Stack Overflow用户
发布于 2022-11-28 07:21:52
嗯..。
分享我的案子。
我是http 8080端口上的runngin react应用程序(子前端应用程序)
运行其他端口的主要前端应用程序
Httpd通过基于名称的虚拟主机为所有应用提供服务。
(已编辑主机文件)
打开主要应用程序"https://majorapp.mydomain.com"
- click按钮，以打开子应用程序"https://subapp.mydomain.com"
- got，与"Websocket .“
相同
我认为webpack开发的服务器包出错了。
所以编辑"/webpack-dev-server/client/utils/parseURL.js“文件
将一行添加到38行
options.protocol = window.location.protocol.includes('https')？ws:ws
并修补它(在npmjs.org上检查它的“修补程序包”包)
并再次运行webpack开发服务器！
https://stackoverflow.com/questions/72524423
复制相似问题
腾讯云开发者
