使用setupProxy后Webpack热更新WebSocket报Invalid frame header错误

原因 #

你的自定义WebSocket代理规则范围太宽，误拦截了Webpack热更新的WebSocket请求，代理服务器处理了不属于自身业务的WS请求，导致帧头解析出错。

具体解决办法 #

1. 精准匹配业务WebSocket路径 #

把代理规则限定在你业务专属的WS路径上，比如你的业务WS用/api/ws，就别用/*这种宽泛匹配：

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

module.exports = function(app) {
  // 只代理业务WS路径
  app.use('/api/ws', createProxyMiddleware({
    target: 'http://你的后端地址',
    ws: true,
    changeOrigin: true
  }));
};

2. 排除Webpack热更新的WS路径 #

如果必须用宽泛匹配，就明确排除Webpack热更新的路径（通常是/sockjs-node/，如果你的Webpack热更新用/ws也加上）：

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

module.exports = function(app) {
  app.use(createProxyMiddleware('/*', {
    target: 'http://你的后端地址',
    ws: true,
    changeOrigin: true,
    pathRewrite: (path, req) => {
      // 遇到Webpack热更新的WS请求，跳过代理
      if (path.startsWith('/sockjs-node/') || path === '/ws') {
        return false;
      }
      return path;
    }
  }));
};

3. 修改Webpack热更新的WS路径（可选） #

要是上面的方法没用，直接改Webpack热更新的WS路径，避免和业务代理冲突：
在webpack.config.js或craco.config.js（用Create React App的话）里加：

module.exports = {
  devServer: {
    hot: true,
    client: {
      webSocketURL: 'ws://localhost:3000/webpack-hot-ws'
    }
  }
};

这样热更新的WS请求会用/webpack-hot-ws，不会被你的业务代理拦截。

4. 屏蔽错误日志（兜底方案） #

如果只是不想看到错误提示，不想改代理或配置，可以关闭Webpack客户端的错误日志：

module.exports = {
  devServer: {
    client: {
      logging: 'warn' // 只显示警告及以上，也可以设为'none'完全关闭
    }
  }
};

不过不推荐这个，会屏蔽其他有用的调试信息。

内容的提问来源于stack exchange，提问作者Hei Yui Wong