React客户端连接Socket.io时返回400错误的问题排查求助

• 优先核对Socket.IO两端版本兼容性
  这是Socket.IO连接返回400错误最常见的原因。Socket.IO v2与v3/v4版本使用的通信协议不兼容，如果服务端和客户端的大版本不一致就会触发该错误。
  解决方法：执行命令核对两端版本，保持大版本统一：
  服务端执行：npm list socket.io
  客户端执行：npm list socket.io-client
  如果版本不一致，统一升级到v4版本即可：
  服务端安装命令：npm install socket.io@4
  客户端安装命令：npm install socket.io-client@4

• 补充客户端连接的凭证配置
  你在服务端Socket.IO配置中开启了credentials: true允许跨域携带凭证，客户端连接时也需要同步开启对应配置，否则会触发跨域校验失败返回400。
  修改客户端连接代码：

const socket = io('http://localhost:5000', {
  withCredentials: true
});

• 可选项：显式指定传输协议
  如果上述修改后还是报错，可以在两端都显式指定传输方式为websocket优先，避免轮询阶段的校验问题：
  客户端修改为：

const socket = io('http://localhost:5000', {
  withCredentials: true,
  transports: ['websocket', 'polling']
});

你编写的socket-setup.js单例工具没有逻辑问题，不会是导致400错误的原因，不需要调整该文件的实现。

内容的提问来源于stack exchange，提问作者AmandaConda