Express服务器出现Socket IO invalid frame报错该如何解决？

该报错本质是WebSocket握手或数据传输阶段，接收到的帧不符合协议规范，常见触发原因如下：

• Socket.IO客户端与服务端版本不兼容：Socket.IO v2、v3、v4大版本之间的传输协议存在破坏性变更，跨大版本调用时会因为帧结构解析规则不一致触发无效帧头报错，是该问题最高发的原因。
• 中间件/反向代理错误处理WebSocket请求：Express的body-parser、cors等HTTP中间件如果错误拦截了Socket.IO的协议升级请求，会把WebSocket流量当成普通HTTP请求解析，破坏原始帧结构；如果使用了Nginx等反向代理，未配置WebSocket支持也会出现同样问题。
• 传输协议协商失败：服务端和客户端配置的允许传输类型不匹配，比如服务端只允许polling传输，客户端强制使用websocket传输，握手阶段返回的内容不符合WebSocket帧规范。
• 端口冲突：当前服务占用的端口同时运行了其他WebSocket服务，Socket.IO的请求被错误分发到其他服务，返回的帧结构不符合预期。

• 统一两端Socket.IO大版本：分别在服务端和客户端项目下执行npm list socket.io、npm list socket.io-client确认版本，确保两端大版本号完全一致，不要跨大版本混用。
• 调整Express服务初始化逻辑，不要将Socket.IO挂载在Express实例上，要挂载在原生HTTP Server实例上，避免HTTP中间件拦截WebSocket请求，参考初始化代码：

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
// Socket.IO挂载在HTTP Server上
const io = new Server(server, {
  cors: {
    origin: "http://你的前端地址", // 生产环境不要配置为*
    methods: ["GET", "POST"]
  }
});

// 普通Express中间件、路由配置在Socket.IO初始化之后即可
app.use(express.json());

server.listen(3000, () => {
  console.log('服务已启动，端口3000');
});

• 配置反向代理的WebSocket支持：如果使用Nginx做反向代理，添加如下配置：

location /socket.io/ {
  proxy_pass http://127.0.0.1:3000;
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "upgrade";
  proxy_set_header Host $host;
}

• 统一两端传输协议配置，避免协商失败：
  服务端配置：
  const io = new Server(server, { transports: ['polling', 'websocket'] });
  客户端配置：
  const socket = io('http://localhost:3000', { transports: ['polling', 'websocket'] });
• 排查端口占用：执行lsof -i:3000（Mac/Linux）或netstat -ano | findstr :3000（Windows），确认3000端口只有当前Express服务占用，关闭冲突服务或者更换服务端口即可。

内容的提问来源于stack exchange，提问作者高欣平