部署服务器后Socket.io出现CORS错误，本地运行正常求原因

本地运行项目一切正常，但将Socket.io API部署到服务器后，控制台出现CORS错误：

Access to XMLHttpRequest at 'https://my-web-site.com.tr/socket.io/?EIO=4&transport=polling&t=ORwXVX_' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

服务端代码 #

const cors = require('cors');
const express = require('express');
const app = express();
const http = require('http').Server(app);

const port = process.env.PORT || 3200;

app.use(cors({
    origin: '*'
}));

const io = require('socket.io')(http, {
    cors: {
        origin: '*',
        methods: ["GET", "POST"],
        allowedHeaders: ["*"],
        credentials: true
    }
}).of('/abcHub');

io.on('connection', (socket) => {
    console.log("Connected: " + socket.id);

    socket.on('disconnect', () => {
        console.log(`Disconnect ${socket.id}`);
        
    });
});


const server = http.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});

客户端代码 #

<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src = "node_modules/socket.io/client-dist/socket.io.min.js"></script>
<script>
    $(document).ready(() => {
        const socket = io("https://my-web-site.com.tr/abcHub"); 
    });
</script>

想请教为何本地无CORS错误，服务器却出现该问题？如有疑问可提出，感谢解答。

问题原因及解决办法 #

核心矛盾点 #

你同时配置了Express的cors全局中间件和Socket.io自身的CORS规则，且存在冲突：

• Express的cors设置origin: '*'
• Socket.io的CORS配置开启了credentials: true，但浏览器规范明确禁止origin: '*'与credentials: true同时使用。本地开发时浏览器出于调试宽容性会忽略该冲突，但服务器环境会严格执行CORS规范，导致校验失败。

具体解决步骤 #

1. 移除Express全局cors中间件：Socket.io自身已处理CORS逻辑，重复配置会引发冲突。
2. 修正Socket.io的CORS配置：
   • 若无需传递凭证（如Cookie、HTTP认证信息），直接移除credentials: true
   • 若必须使用凭证，将origin设置为具体的客户端域名（如"https://your-client-domain.com"），不能用通配符*

无需凭证场景的修正代码

const express = require('express');
const app = express();
const http = require('http').Server(app);

const port = process.env.PORT || 3200;

// 移除全局cors中间件
// app.use(cors({ origin: '*' }));

const io = require('socket.io')(http, {
    cors: {
        origin: '*',
        methods: ["GET", "POST"],
        allowedHeaders: ["*"]
        // 删除credentials: true配置
    }
}).of('/abcHub');

io.on('connection', (socket) => {
    console.log("Connected: " + socket.id);

    socket.on('disconnect', () => {
        console.log(`Disconnect ${socket.id}`);
    });
});

const server = http.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});

需凭证场景的修正代码

const io = require('socket.io')(http, {
    cors: {
        origin: "https://your-client-domain.com", // 替换为实际客户端域名
        methods: ["GET", "POST"],
        allowedHeaders: ["*"],
        credentials: true
    }
}).of('/abcHub');

额外排查点 #

• 若服务器使用反向代理（如Nginx），需在代理配置中添加对应CORS响应头，避免代理层覆盖Socket.io的CORS设置：

  location /abcHub {
      proxy_pass http://localhost:3200/abcHub;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
      proxy_set_header Host $host;
      add_header Access-Control-Allow-Origin "https://your-client-domain.com" always;
      add_header Access-Control-Allow-Credentials true;
  }
  

• 若客户端通过file://协议直接打开HTML文件，请求origin会是null，这种情况即使服务器配置*也可能被浏览器拦截。建议客户端通过HTTP服务器（如http-server）访问，确保origin为合法域名或IP。

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