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上被代理。

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

我试图找出为什么React应用程序会收到400错误。我尝试了许多代理配置（我尝试了package.json文件中的代理配置，也尝试了基于http-proxy-middleware github页面的其他一些可能的配置）。

我发现http-proxy-middleware和react-scripts有一些问题：

经过一番调查，似乎该问题来自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版，因为我依赖无效的合并，但通常不建议使用beta版。

用react-scripts代理websocket不起作用

1 个答案: