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

Posted 2023-02-16

【中文标题】使用 react-scripts 代理 websocket 不起作用

【英文标题】：Proxying websocket with react-scripts does not work

【发布时间】：2020-01-08 10:42:10

【问题描述】：

我有一个反应网络应用程序，我使用反应脚本进行开发。我使用代理将请求和 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 应用程序在ws://localhost:3000/api/foo/bar 上打开一个 websocket，后端接收到 websocket 请求并对其进行升级，并以 101 http 代码进行响应。但是反应网络应用程序从未收到此响应。 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 响应。

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

【参考方案1】：

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