Angular+Node项目Socket.io连接报错：跨域拦截及404状态码

Hey，我看你在Angular+Node+Socket.io的连接上遇到了两个棘手的问题：CORS凭证报错和Socket.io端点404，我来帮你一步步解决它们！

先拆解下问题根源 #

1. CORS凭证冲突：Socket.io默认会携带跨域凭证（比如Cookie），但你的CORS配置里把Access-Control-Allow-Origin设成了*，浏览器明确禁止这种组合——通配符和凭证不能同时用。
2. Socket.io端点未加载：你虽然创建了绑定Socket.io的HTTP Server，但最后启动的是Express自带的app.listen()，导致Socket.io的路由根本没被挂载，自然会返回404。

步骤1：修复CORS配置（二选一即可） #

方案A：用cors包规范配置（推荐） #

替换你手写的CORS中间件，用官方的cors包来精确控制允许的域名和凭证：

// 删掉原来手写的CORS中间件，换成这个
app.use(cors({
  origin: 'http://localhost:4200', // 这里填你的Angular前端地址，默认是4200
  credentials: true // 允许携带跨域凭证
}));

方案B：直接给Socket.io配置CORS #

如果Express的CORS配置和Socket.io有冲突，可以直接在初始化Socket.io时设置：

// 替换原来的io初始化代码
var io = require('socket.io')(server, {
  cors: {
    origin: 'http://localhost:4200',
    credentials: true
  }
});

步骤2：修复服务器启动逻辑 #

你创建了server = http.createServer(app)来挂载Socket.io，但最后却用app.listen()启动了纯Express服务器，这就相当于白绑定了Socket.io。修改数据库连接成功后的启动代码：

mongoose.connect(mongoURI, { useNewUrlParser: true })
 .then(() => {
 console.log("BD conectada");
 // 启动绑定了Socket.io的HTTP Server，而不是app.listen
 server.listen(port, () => {
 console.log("Puerto " + port);
 })
 })
 .catch(err => console.log(err));

步骤3：Angular客户端补充配置 #

确保你的Angular代码连接Socket.io时也开启凭证：

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

// 客户端连接配置
const socket = io('http://localhost:3000', {
  withCredentials: true,
  transports: ['polling', 'websocket'] // 可选，指定传输方式，适配不同场景
});

最后重启你的Node服务器和Angular应用，应该就能看到Node控制台打印new connection made.，浏览器的CORS和404错误也会消失啦！

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