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

Question

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

我的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应用程序在http://localhost:3000/api/foo/bar上执行请求，该请求在http://localhost:9140/api/foo/bar上进行代理。

我的问题是websockets。receive应用程序在ws://localhost:3000/api/foo/bar上打开websocket，后端接收websocket请求并升级它，并使用101个http代码进行响应。但是receive应用程序从来没有收到过这个响应。receive应用程序接收一个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在开发中使用代理？

Answer 1

在Crey-ReactiveAPv3.3.0中，websocket代理是坏的。试着降级到3.2.0版本。我仍然使用v3.3.0测试版，因为我依赖于无效的合并，但我一般不建议使用beta版本。