使用socket.io遇到CORS跨域问题，按官方配置后仍未解决怎么办

问题原因 #

1. 最直接的触发点：服务端CORS配置的origin末尾多了尾斜杠。浏览器发送的Origin请求头值是http://localhost:63341，不带末尾的/，你配置的带斜杠的地址和实际Origin匹配失败，所以CORS校验不通过。
2. 其他可能的触发原因：

• 若客户端后续需要携带Cookie等身份凭证，服务端没配置credentials: true，也会触发CORS报错
• 服务端和客户端的socket.io大版本不匹配，部分旧版本的CORS配置逻辑存在差异
• 部分环境下socket.io默认的长轮询预检请求校验失败

解决步骤 #

1. 优先修正服务端CORS配置，去掉origin的尾斜杠，同时根据需要补充凭证配置：

const app = require('express')();
const http = require('http').createServer(app);
const io = require("socket.io")(http, {
    cors: {
        origin: "http://localhost:63341", // 去掉末尾的/，单个源直接写字符串即可
        methods: ["GET", "POST"],
        credentials: true // 如果需要传递Cookie等凭证就加，不需要可以省略
    }
})

2. 如果修正后还是报错，可在客户端初始化时指定传输方式优先级，优先用WebSocket（本身不存在CORS限制，只有长轮询阶段会触发CORS校验）：

<script src="https://cdn.jsdelivr.net/npm/socket.io-client@4.1.2/dist/socket.io.msgpack.min.js"></script>
<script>
    let socket = io('http://localhost:2021', {
        transports: ['websocket', 'polling'] // 优先走websocket，降级才用轮询
    })
</script>

3. 确认服务端和客户端socket.io大版本一致，你这里客户端用的是v4.x版本，服务端也要用v4.x版本，避免版本不兼容导致的配置失效。

完成上述修改后重启服务端，刷新页面即可正常建立连接。

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