使用Socket.io与NGROK时遭遇CORS错误：原因及解决方案

1. 完善CORS配置，覆盖预检请求需求 #

当前服务端的CORS配置仅指定了基础的origin和methods，浏览器发起的预检请求（OPTIONS）可能未被正确允许，建议扩展配置：

const io = new Server(httpServer, {
  cors: {
    origin: "*",
    methods: ["GET", "POST", "OPTIONS"], // 加入OPTIONS方法，适配浏览器预检请求
    allowedHeaders: ["*"], // 允许所有请求头
    credentials: false // 若客户端无需携带认证信息（如Cookie），保持false；若需要，origin需改为具体域名，不能用*
  },
  path: "/correction-socket"
});

2. 校验客户端连接参数的准确性 #

• 确认process.env.SOCKET_CORRECTION_URL是完整的协议+域名（比如ngrok提供的https://xxx.ngrok.io，本地开发的http://localhost:5000），避免遗漏协议导致跨域判断异常
• 若客户端需要发送认证信息，需在客户端配置中添加withCredentials: true，同时服务端origin要改为具体允许的域名（不能用*）：
  客户端代码调整：

  this.socket = io(process.env.SOCKET_CORRECTION_URL, {
    path: '/correction-socket',
    withCredentials: true
  });
  

  服务端对应调整：

  const io = new Server(httpServer, {
    cors: {
      origin: ["http://localhost:3000", "https://xxx.ngrok.io"], // 替换为实际客户端域名
      methods: ["GET", "POST", "OPTIONS"],
      credentials: true
    },
    path: "/correction-socket"
  });
  

3. 排除浏览器环境干扰 #

• 使用隐身窗口测试，避免浏览器缓存的旧CORS规则导致误判
• 禁用浏览器的CORS相关扩展（如CORS Unblock），这类工具可能反向干扰正常的跨域校验逻辑

4. 修正服务端房间检测逻辑（消除潜在隐患） #

当前isRoomAlreadyOccupied函数使用了Socket.io已弃用的io.sockets.socketsAPI，推荐改用官方适配的方式获取房间信息：

function isRoomAlreadyOccupied(payload) {
  const rooms = io.sockets.adapter.rooms;
  // 检查房间存在且已有非默认连接（排除socket自身的私有房间）
  return rooms.has(payload) && rooms.get(payload).size > 0;
}

5. 验证服务端预检响应 #

用curl手动发送OPTIONS请求，确认服务端返回正确的CORS响应头：

curl -X OPTIONS -H "Origin: http://localhost:3000" http://localhost:5000/correction-socket/

正常响应应包含Access-Control-Allow-Origin、Access-Control-Allow-Methods等关键头信息。

内容的提问来源于stack exchange，提问作者Vinícius de Oliveira