为websocket引入中间件代理时，反应热重新加载中断

Question

您好，我有一个同时使用socket.io-client和http-proxy-middleware的react应用程序。在为socket.io websocket引入代理时，react-scripts start提供的热重新加载功能不再起作用。

我可以看到，对/sockjs-node的WS网络调用被代理到提供websocket的后端服务，而不是react应用程序的开发构建服务器。我已尝试更改websocket路径，但无济于事。有没有办法让这两个工具变得更好呢？

setupProxy.js文件

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(
        '^/api',
        createProxyMiddleware({
            target: 'http://localhost:8012',
            changeOrigin: true,
            pathRewrite:  {'^/api': ''}
        })
    );
    app.use(
        '^/socket.io',
        createProxyMiddleware({
            target: 'ws://localhost:8012',
            changeOrigin: true,
            ws: true,
        })
    );
};

socket.io实例

import io from 'socket.io-client';

const socket = io();

package.json文件

{
  "name": "client-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@ant-design/icons": "^4.2.2",
    "@types/node": "^12.12.36",
    "@types/react": "^16.9.34",
    "@types/react-dom": "^16.9.6",
    "@types/styled-components": "^4.4.2",
    "antd": "^4.3.4",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-lazylog": "^4.5.3",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.1",
    "socket.io-client": "^2.3.1",
    "styled-components": "^5.1.0",
    "typescript": "^3.7.5"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "@types/jest": "^24.9.1",
    "http-proxy-middleware": "^1.0.5",
    "jest-fetch-mock": "^3.0.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

提前谢谢你。

Answer 1

http-proxy-middleware支持路径过滤和使用忽略(https://github.com/chimurai/http-proxy-middleware/issues/31)。

您可以通过将['!/sockjs-node']传递到createProxyMiddleware来从代理中删除sockjs-node路径。现在将跳过实时重新加载路径。

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(
        '/api',
        createProxyMiddleware(['!/sockjs-node'], {
            target: 'http://localhost:5000/',
            changeOrigin: true,
            ws: true,
        })
    );
};