Socket.IO WebSocket代码本地可访问，测试客户端报xhr poll连接错误

问题描述 #

使用Socket.IO编写的基础WebSocket服务运行正常，浏览器可访问localhost:5000，但通过Socket.IO Test Client Chrome扩展或其他WebSocket测试工具连接时，返回错误“connection error: xhr poll”。服务端代码如下：

const objExpress = require('express');
const objApp = objExpress();
const objHTTP = require('http');
const objServer = objHTTP.createServer(objApp);
const {Server} = require('socket.io');
const objIO = new Server(objServer);


objServer.listen(5000,"localhost", () => {
    console.log("listening to port 5000");
});

核心原因 #

1. 跨域限制：测试工具的运行环境（如Chrome扩展）与服务端localhost:5000属于不同域名，未配置CORS会导致轮询请求被浏览器拦截。
2. Socket.IO协议特殊性：Socket.IO并非原生WebSocket协议，它依赖自定义的握手和升级逻辑，原生WebSocket测试工具无法直接兼容；部分Socket.IO测试工具需要正确配置连接参数才能正常通信。
3. 版本兼容性：服务端Socket.IO版本与测试工具的客户端版本不匹配，会导致协议协商失败。

解决措施 #

1. 配置CORS允许跨域请求 #

创建Socket.IO实例时添加CORS配置，开发环境可临时允许所有来源，生产环境需指定具体域名：

const objIO = new Server(objServer, {
  cors: {
    origin: "*", // 生产环境替换为实际允许的域名
    methods: ["GET", "POST"]
  }
});

2. 正确使用Socket.IO兼容的测试工具 #

• 使用Socket.IO官方测试工具或支持Socket.IO协议的客户端，连接地址填写http://localhost:5000（注意是HTTP协议，Socket.IO会自动完成WebSocket升级）。
• 避免使用仅支持原生WebSocket的测试工具，这类工具无法处理Socket.IO的握手流程。

3. 验证版本兼容性 #

检查服务端Socket.IO版本（执行npm list socket.io查看），确保测试工具使用的客户端版本与服务端一致或兼容（如v4.x服务端对应v4.x客户端）。

完整修改代码 #

const objExpress = require('express');
const objApp = objExpress();
const objHTTP = require('http');
const objServer = objHTTP.createServer(objApp);
const {Server} = require('socket.io');

// 配置CORS并创建Socket.IO实例
const objIO = new Server(objServer, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"]
  }
});

// 添加连接监听，验证客户端连接状态
objIO.on('connection', (socket) => {
  console.log('客户端已连接:', socket.id);
  socket.on('disconnect', () => {
    console.log('客户端已断开:', socket.id);
  });
});

objServer.listen(5000, "localhost", () => {
    console.log("服务运行在localhost:5000");
});

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