Socket.IO客户端用自托管服务器地址时遇XHR轮询CORS拦截错误

核心问题排查 #

你当前的关键错误是前端Socket.IO客户端连接地址写错了：你把服务器地址替换成了客户端的zrok地址（https://<client share name>.share.zrok.io），导致请求发向了客户端自身的服务，而非Socket.IO服务器，自然会出现CORS缺失的问题。

分步解决方案 #

1. 修正前端连接地址 #

将前端Socket.IO客户端的连接目标改为服务器的zrok公开地址，示例代码：

import { io } from "socket.io-client";

// 替换为你的服务器zrok地址
const socket = io("https://<server share name>.share.zrok.io");

2. 简化服务器端CORS配置 #

移除createServer回调中手动设置的CORS响应头——Socket.IO内置了CORS处理逻辑，手动设置的头会和它的自动处理冲突，尤其是预检OPTIONS请求。修改后的服务器代码：

const httpServer = createServer(function (req, res) {
  // 仅处理非Socket.IO路径的请求，不需要额外路由可直接删除此回调
  res.writeHead(200, { 'Content-Type': 'application/json' });
  res.end(JSON.stringify({ message: 'Server running' }));
});

const io = new Server(httpServer, {
  cors: {
    origin: "https://<client share name>.share.zrok.io", // 指定客户端的zrok域名，比*更安全
    methods: ["GET", "POST", "OPTIONS"], // 包含预检请求需要的OPTIONS方法
    allowedHeaders: ["Content-Type", "Accept"], // 覆盖Socket.IO连接所需的请求头
    credentials: false // 无需身份验证时设为false，需要则设为true并确保origin不是*
  }
});

3. 验证zrok转发配置 #

确保zrok的共享命令正确映射本地服务：

• 服务器端转发：

zrok share public localhost:8000

• 客户端转发：

zrok share public localhost:5173

4. 调整Vite配置（可选） #

如果前端有跨域代理需求，在vite.config.ts中允许zrok域名：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  server: {
    allowedHosts: true, // 允许所有主机，或指定客户端zrok域名数组
  }
});

问题原因说明 #

1. 前端连接地址错误：请求发向客户端自身服务，而非Socket.IO服务器，导致目标服务没有配置对应CORS头。
2. 手动CORS头冲突：Socket.IO会自动处理/socket.io/路径的预检请求，手动设置的头会干扰其默认逻辑，导致CORS验证失败。
3. 通配符origin兼容性：使用*作为origin在部分代理场景（如zrok）下可能存在兼容性问题，指定具体客户端域名更可靠。

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