Socket.io连接被CORS策略拦截，请求解决方案

你的问题核心在于Socket.io的连接请求不会走Express的cors中间件，必须单独给Socket.io配置CORS规则，仅靠Express的cors包无法覆盖Socket.io的连接请求。

具体修改方案 #

1. 给Socket.io添加CORS配置 #

初始化Server实例时，直接传入cors配置参数，指定允许的源、请求方法等规则：

const { Server } = require("socket.io");
const app = express();
const server = require("http").Server(app);

// 关键：给Socket.io单独配置CORS
const io = new Server(server, {
  cors: {
    origin: "http://localhost:3000", // 明确指定前端地址，生产环境不要用*
    methods: ["GET", "POST"]
  }
});

2. 清理重复配置 #

你当前代码里手动设置Access-Control-Allow-Origin的中间件，和Express的cors中间件功能重复，可以移除其中一个，推荐保留Express的cors中间件（如果有其他HTTP接口需要跨域）：

app.use(bodyParser.json());
// 保留Express的cors中间件（用于普通HTTP接口跨域）
app.use(cors({
  origin: "http://localhost:3000"
}));

// 移除这个重复的自定义中间件
// app.use((req, res, next) => {
//   res.setHeader("Access-Control-Allow-Origin", "*");
// });

为什么之前的配置无效？ #

Socket.io在建立实时连接时，会发起专属的HTTP请求（比如报错里的polling请求），这类请求不会经过你给Express配置的cors中间件，必须在Socket.io的Server初始化阶段单独配置CORS规则，才能让这些跨域请求通过浏览器的检查。

如果开发环境需要临时允许所有源，可以把origin设为"*"，但生产环境强烈建议明确指定允许的域名，避免安全风险。

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