Reactjs 使用react脚本代理websocket不起作用

我有一个react web应用程序，我使用react脚本进行开发。我使用代理将请求和WebSocket代理到后端

My 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

我的问题是WebSocket。react web应用程序在

ws://localhost:3000/api/foo/bar

上打开websocket，后端接收websocket请求并对其进行升级，然后使用101 http代码进行响应。但是react web应用程序从未收到此响应。react web应用程序接收400 http代码响应。因此，websocket已关闭

我试图找出react应用程序收到400错误的原因。我尝试了许多代理配置（我尝试了

package.json

文件中的代理配置，我尝试了一些基于

http代理中间件

github页面的其他可能配置）

我发现

http代理中间件

和

react脚本

存在一些问题：

经过调查，问题似乎来自Webpack使用的

sockjs节点

。它看起来像是

sockjs节点

捕获请求并用错误400响应替换我的后端响应

---

有人知道如何让websocket在开发中的react应用程序中使用代理吗？

在create react app v3.3.0中，websocket代理是一种非常有用的方法。尝试降级到v3.2.0。我仍然使用v3.3.0测试版，因为我依赖于空合并，但我一般不建议使用测试版