我有一个反应网络应用程序，我使用反应脚本进行开发。我使用代理将请求和 websocket 代理到后端。
我的 package.json ：
{
"name": "webapp",
"version": "0.1.0",
"private": true,
"dependencies": {
// ...
"react-scripts": "^3.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
// ...
},
"devDependencies": {
// ...
},
"homepage": "/home"
}
我有一个 setupProxy.js ：
const proxy = require("http-proxy-middleware")
module.exports = app => {
app.use(proxy('/api', {
target: 'http://127.0.0.1:9140',
ws: true
}));
app.disable('etag');
}
代理适用于 http 请求。React Web 应用程序在 上执行请求，http://localhost:3000/api/foo/bar并且请求在 上代理http://localhost:9140/api/foo/bar。
我的问题是 websockets。react web 应用打开一个 websocket on ws://localhost:3000/api/foo/bar，后端接收 websocket 请求并升级它并以 101 http 代码响应。但是反应网络应用程序从未收到此响应。React Web 应用程序收到 400 http 代码响应。所以websocket被关闭了。
我试图找出反应应用程序收到 400 错误的原因。我尝试了许多代理配置（我尝试了package.json文件中的代理配置，我尝试了基于http-proxy-middlewaregithub 页面的其他一些可能的配置）。
http-proxy-middleware我发现and有一些问题react-scripts：
- https://github.com/facebook/create-react-app/issues/5280
- https://github.com/chimurai/http-proxy-middleware/issues/112
经过一番调查，问题似乎来自sockjs-nodeWebpack 使用。它看起来像sockjs-node捕获请求并将我的后端响应替换为错误 400 响应。
有谁知道如何使 websockets 在开发中的反应应用程序中与代理一起工作？