部署后Socket.io请求遭CORS拦截及404问题求助

1. 清理冲突的CORS中间件 #

你的代码重复添加了3次CORS相关处理，会导致头信息冲突，直接移除多余的两个：

• 删除app.use(cors());
• 删除自定义的res.header中间件块
  仅保留app.use(cors(corsOptions));即可，corsOptions已包含所需的完整配置。

2. 修正CORS源配置 #

错误提示的请求源是https://develop.domain.com，但当前corsOptions的origin数组里写的是"https://develop.example.com"，属于域名笔误，修正后确保正则和具体域名匹配目标源：

const corsOptions = {
  origin: [
    "http://localhost:3000",
    /domain\.com$/,
    "https://example.com",
    "https://develop.domain.com", // 修正此处域名
    "http://localhost",
  ],
  credentials: true,
  allowedHeaders: "*",
  optionsSuccessStatus: 200,
  methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
};

3. 修正Socket.io的连接与配置 #

前端连接修正 #

你的前端代码存在语法错误，URL缺少引号，修正为：

var socket = io("https://backend.com"); // 给URL添加双引号

同时确认https://backend.com是部署后端的正确域名，若实际后端域名是develop.domain.com，则替换为对应地址。

后端Socket.io CORS配置 #

Socket.io的CORS处理独立于Express，需和Express配置保持一致，避免用"*"（会与credentials: true冲突），改为匹配目标源的规则：

const io = require("socket.io")(server, {
  cors: {
    origin: [
      "http://localhost:3000",
      /domain\.com$/,
      "https://example.com",
      "https://develop.domain.com",
      "http://localhost",
    ],
    credentials: true,
    methods: ["GET", "POST"]
  },
});

4. 排查404错误 #

错误中的请求URLdevelop.domain.com/socket.io/?...缺少https://协议，浏览器会将其视为相对路径发起请求，最终返回404：

• 确保前端连接的是完整带协议的后端URL
• 检查部署环境的反向代理（如Nginx）是否正确配置Socket.io转发规则，需同时支持HTTP和WebSocket请求转发

内容的提问来源于stack exchange，提问作者Usman Khalid Mian