websocket - 如何在反应应用程序中使用 http-proxy-middleware 正确设置 websocket 代理

Question

我使用 create-react-app 创建了一个 react 应用程序，并尝试使用 http-proxy-middleware 设置 websocket 代理。

这里是配置。

const { createProxyMiddleware } = require('http-proxy-middleware');
let remote_url = 'http://127.0.0.1:8088/';
module.exports = function (app) {
  app.use(
    '/name',
    createProxyMiddleware({
      target: remote_url,
      changeOrigin: false,
      ws: true,
      secure: false,
      //logLevel: 'debug',
      pathRewrite: {
        '^/name': '/name',
      },
    }),
  );
  app.use(
    '/api',
    createProxyMiddleware({
      target: remote_url,
      changeOrigin: false,
      ws: false,
      pathRewrite: {
        '^/api': '/api',
      },
    }),
  );
}

这是我放入浏览器控制台进行测试的测试脚本

// Create WebSocket connection.
const socket = new WebSocket('ws://127.0.0.1:3000/name');

// Connection opened
socket.addEventListener('open', function (event) {
    socket.send('Hello Server!');
});

// Listen for messages
socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);
});

当 web-dev-server 启动时，它会打印以下日志

[HPM] Proxy created: /  -> http://127.0.0.1:8088/
[HPM] Proxy rewrite rule created: "^/name" ~> "/name"
[HPM] Proxy created: /  -> http://127.0.0.1:8088/
[HPM] Proxy rewrite rule created: "^/api" ~> "/api"

/api 上的 http 代理工作正常。但是， /name 上的 ws 代理似乎无法正常工作，并且连接会挂起一段时间，直到失败。前端项目使用 CRA 的 web-dev-server 启动，api 由 spring-boot 项目提供。

如果我将前端项目构建到后端 spring-boot 项目中，并让 spring-boot 项目托管所有这些静态文件。在这种情况下，websocket 可以连接，并且测试脚本工作正常。

标签： websocketproxycreate-react-apphttp-proxy-middleware