Angular与Node.js的Socket.io连接报错：带凭证请求不能用通配符跨域

这个报错的核心原因其实是Socket.io 默认会携带凭证（比如 Cookie）发起跨域请求，而浏览器的安全规则明确要求：当请求的凭证模式为 include 时，Access-Control-Allow-Origin 不能使用通配符 *，必须指定具体的源，同时还要显式开启 Access-Control-Allow-Credentials: true。

你当前的配置矛盾点在于：虽然 Socket.io 端设置了允许的源，但 Express 的 CORS 配置用了通配符 *，这就触发了浏览器的安全限制。下面是具体的修复步骤：

1. 修正 Express 的 CORS 配置 #

把通配符替换为 Angular 应用的具体源，同时开启凭证支持：

const cors = require('cors');

// 替换原来的允许所有源的配置
app.use(cors({
  origin: 'http://localhost:4200', // 精确指定 Angular 源
  credentials: true // 允许携带凭证
}));

2. 更新 Socket.io 的跨域配置 #

注意：Socket.io v3 及以上版本已经废弃了 io.set('origins') 这种写法，需要直接在初始化时配置 cors 选项，和 Express 的配置保持一致：

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

const app = express();
const server = http.createServer(app);

// 初始化 Socket.io 时配置跨域
const io = new Server(server, {
  cors: {
    origin: 'http://localhost:4200',
    credentials: true
  }
});

// 后续的 Socket.io 逻辑...
io.on('connection', (socket) => {
  console.log('用户已连接');
});

3. 确保 Angular 端开启凭证支持 #

在 Angular 连接 Socket.io 时，需要显式设置 withCredentials: true：

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

// 初始化 Socket 连接
export const socket = io('http://localhost:3000', {
  withCredentials: true
});

最后验证点 #

• 确认两端配置的 origin 完全一致（包括协议、域名、端口，比如都是 http://localhost:4200，不要漏写 http）
• 重启 Node.js 服务器和 Angular 应用，确保新配置生效

这样调整后，浏览器就不会再因为凭证模式和通配符的冲突而拒绝请求了。

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