reactjs - 使用react-scripts代理websocket不起作用

Question

我有一个 React Web 应用程序，我使用 React-Scripts 进行开发。我使用代理将请求和 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 上代理.

我的问题与网络套接字有关。 React Web 应用程序在 ws://localhost:3000/api/foo/bar 上打开一个 websocket，后端接收 websocket 请求并对其进行升级，并使用 101 http 代码进行响应。但 React Web 应用程序从未收到此响应。 React Web 应用程序收到 400 http 代码响应。因此 websocket 已关闭。

我试图找出 React 应用程序收到 400 错误的原因。我尝试了很多代理配置(我尝试了 package.json 文件中的代理配置，我尝试了基于 http-proxy-middleware github 页面的其他一些可能的配置)。

我发现 http-proxy-middleware 和 react-scripts 存在一些问题:

• https://github.com/facebook/create-react-app/issues/5280
• https://github.com/chimurai/http-proxy-middleware/issues/112

经过一番调查，问题似乎来自 Webpack 使用的 sockjs-node。看起来 sockjs-node 捕获了请求并用错误 400 响应替换我的后端响应。

有谁知道如何在开发中的 React 应用程序中使 Websocket 与代理一起工作？

Answer 1

在 create-react-app v3.3.0 中，websocket 代理是 broken 。尝试降级到v3.2.0。我仍然使用 v3.3.0 beta 版本，因为我依赖 nullish合并，但我通常不建议使用 beta 版本。