Node.js Socket.IO 跨域（CORS）问题求助

问题背景 #

开发Node.js消息程序时遭遇CORS拦截，客户端运行在127.0.0.1:5501，仅能通过浏览器插件临时绕过，报错信息如下：

Access to XMLHttpRequest at 'localhost:5000/socket.io/…' from origin '127.0.0.1:5501' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
polling-xhr.js:203 GET localhost:5000/socket.io/… net::ERR_FAILED 200 (OK)

核心问题分析 #

1. Express的cors中间件仅处理普通HTTP请求，Socket.IO的连接请求需单独配置CORS规则
2. 服务端存在端口配置冲突：已将Socket.IO绑定到5000端口的HTTP服务器，却又调用io.listen(5500)创建独立服务，导致连接混乱
3. Origin配置不完整：客户端实际来源是127.0.0.1:5501，但配置列表仅包含localhost:5501，二者在CORS规则中属于不同源
4. 自定义CORS中间件与官方cors插件冲突，重复设置跨域头引发异常

解决方案 #

1. 修正服务端Socket.IO配置

移除冲突代码，给Socket.IO单独配置CORS，确保与Express的CORS规则一致：

import { createServer } from 'http';
import { Server } from 'socket.io';
import express from 'express';
import cors from 'cors';

const app = express();
const httpServer = createServer(app);

// 初始化Socket.IO时直接配置CORS
const io = new Server(httpServer, {
  cors: {
    origin: ['http://localhost:5501', 'http://127.0.0.1:5501'], // 包含客户端实际来源
    methods: ['GET', 'POST'],
    credentials: true
  }
});

// 保留Express的CORS配置（若需处理其他HTTP请求）
const corsOptions = {
  origin: ['http://localhost:5000', 'http://localhost:5500', 'http://localhost:5501', 'http://127.0.0.1:5501'],
  methods: ['GET', 'POST', 'OPTIONS'],
  allowedHeaders: ['Content-Type'],
  credentials: true
};
app.use(cors(corsOptions));

io.on('connection', socket => {
  socket.emit('chat-message', 'Hello World');

  socket.on('send-chat-message', message => {
    console.log(message);
  });
});

const portHttp = 5000;
httpServer.listen(portHttp, () => console.log(`HTTP Server listening on port ${portHttp}`));
// 移除单独的io.listen调用，Socket.IO已绑定到HTTP服务器

2. 修正客户端连接配置

确保连接地址完整，且启用凭证传递（与服务端配置匹配）：

console.log('Client code is loaded');

// 完整地址+启用凭证
const socket = io('http://localhost:5000', {
  withCredentials: true
});

const messageInput = document.getElementById('message-input');
const messageForm = document.getElementById('sendForm');

messageForm.addEventListener('submit', event => {
  event.preventDefault();
  const message = messageInput.value;
  socket.emit('send-chat-message', message);
  messageInput.value = '';
});

socket.on('chat-message', data => {
  console.log(data);
});

3. 关键注意事项

• 必须同时包含localhost:5501和127.0.0.1:5501到允许的Origin列表，二者属于不同跨域源
• 移除自定义的CORS中间件app.use((req, res, next) => { ... })，避免与官方插件的头信息冲突
• Socket.IO无需单独开端口，直接绑定到现有HTTP服务器即可统一管理

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