Node.js与Angular的Socket.IO连接故障及CORS问题求助

看起来你遇到的是Socket.IO在带凭证的跨域请求下的典型CORS配置冲突问题，我来一步步帮你排查和解决：

问题根源 #

当客户端请求携带凭证（比如Cookie、HTTP认证信息）时，浏览器的CORS规则有两个硬性要求：

1. 服务器不能用*作为Access-Control-Allow-Origin的值，必须指定明确的客户端域名
2. 服务器必须返回Access-Control-Allow-Credentials: true响应头

你的两次错误正好对应这两个规则：用*时违反第一条，指定origin但没配置credentials违反第二条。

正确配置步骤 #

1. 服务器端（server.js）配置 #

首先确保你安装了最新版的依赖：npm install express socket.io cors

然后修改你的服务器代码，同时配置Express和Socket.IO的CORS规则，保持两者一致：

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');
const cors = require('cors');
const app = express();

// 配置Express的CORS（如果你的API接口也需要跨域访问）
app.use(cors({
  origin: "http://localhost:4200", // 匹配Angular客户端的域名+端口
  credentials: true // 明确允许携带凭证
}));

// 创建HTTP服务器（Socket.IO需要依托HTTP服务器）
const server = http.createServer(app);

// 关键：Socket.IO的CORS配置必须和Express同步
const io = new Server(server, {
  cors: {
    origin: "http://localhost:4200",
    credentials: true,
    methods: ["GET", "POST"] // 可选，指定允许的HTTP方法
  }
});

// 监听用户连接事件
io.on('connection', (socket) => {
  console.log(`用户已连接，Socket ID: ${socket.id}`);
  
  // 监听断开连接事件
  socket.on('disconnect', () => {
    console.log(`用户已断开连接，Socket ID: ${socket.id}`);
  });
});

const PORT = 8081;
server.listen(PORT, () => {
  console.log(`服务器运行在 http://localhost:${PORT}`);
});

2. Angular客户端配置 #

在你的Socket服务中，必须开启withCredentials: true，否则客户端不会携带凭证，服务器的credentials配置也无法生效：

import { Injectable } from '@angular/core';
import { io, Socket } from 'socket.io-client';

@Injectable({
  providedIn: 'root'
})
export class SocketService {
  private socket: Socket;

  constructor() {
    // 连接服务器时开启凭证传递
    this.socket = io('http://localhost:8081', {
      withCredentials: true,
      // 可选：指定传输方式，避免某些浏览器的轮询问题
      transports: ['websocket', 'polling']
    });

    // 客户端监听连接成功事件
    this.socket.on('connect', () => {
      console.log('已成功连接到Socket.IO服务器');
    });

    this.socket.on('disconnect', () => {
      console.log('与服务器断开连接');
    });
  }

  getSocket(): Socket {
    return this.socket;
  }
}

验证与排查 #

完成配置后，重启服务器和Angular应用，按以下步骤验证：

• 查看服务器控制台，应该能看到用户已连接，Socket ID: xxx的日志
• 打开浏览器控制台，应该能看到已成功连接到Socket.IO服务器的日志
• 打开浏览器开发者工具的Network面板，找到socket.io的请求（比如/socket.io/?EIO=4&transport=polling...），检查响应头：
  • 必须包含Access-Control-Allow-Origin: http://localhost:4200
  • 必须包含Access-Control-Allow-Credentials: true

如果还是有问题，检查以下几点：

• 确认Socket.IO版本：如果是v3之前的版本，配置方式不同（比如用io.set('origins', 'http://localhost:4200')）
• 不要在Express和Socket.IO中配置冲突的CORS规则（比如一个用*，一个用指定origin）
• 确保Angular应用确实运行在http://localhost:4200（如果修改过端口，要同步更新服务器的origin配置）

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