Socket.io连接Node.js Express服务器遇CORS问题无法访问

我尝试用socket.io在已连接用户之间传输数据，本地Vue客户端对接Node.js Express服务器时出现以下CORS错误：

从源'http://localhost:8080'访问'http://localhost:3000/socket.io/?EIO=4&transport=polling&t=Od4xImE'的XMLHttpRequest已被CORS策略阻止：请求的资源上不存在'Access-Control-Allow-Origin'标头。

直接访问该链接返回内容正常：

0{"sid":"vbn04o2Bp2_RWhO_AAAX","upgrades":["websocket"],"pingInterval":25000,"pingTimeout":20000,"maxPayload":1000000}

试过多种CORS配置方法仍无法解决，附上当前服务器和客户端代码：

服务器代码 #

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require('socket.io');
const io = new Server(server);
const cors = require('cors');

app.use(cors({
  origin: 'http://localhost:8080'
}));

io.on("connection", (socket) => {
  console.log("A user connected");

  socket.on("message", (data) => {
    console.log("Recieved message: ", data);
    io.emit("message", data);
  });

  socket.on("disconnect", () => {
    console.log("A user disconnected");
  });
});

app.get('/', (req, res) => {
  res.send('Hello, this is the root route!');
});

const PORT = 3000;

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

客户端代码 #

import Vue from "vue";
import App from "./App.vue";
import vuetify from "./plugins/vuetify";
import router from "../router";
import io from 'socket.io-client';

Vue.config.productionTip = false;

const socket = io('http://localhost:3000');

Vue.prototype.$socket = socket;

new Vue({
  vuetify,
  router,
  render: (h) => h(App),
}).$mount("#app");

解决方法 #

问题核心是你仅给Express应用配置了CORS中间件，但socket.io的握手请求并不经过Express的中间件链，必须直接给socket.io实例配置CORS规则。

修改服务器代码中socket.io的初始化代码：

// 替换原来的const io = new Server(server);
const io = new Server(server, {
  cors: {
    origin: "http://localhost:8080",
    methods: ["GET", "POST"]
  }
});

修改后，socket.io会在握手请求中自动添加正确的CORS响应头，客户端即可正常建立连接。Express的cors中间件可以保留，用于处理其他API接口的跨域请求。

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