Laravel+Vue项目接入socket.io时出现CORS跨域错误该如何解决

问题根源：Laravel的跨域中间件仅作用于Laravel自身的服务请求，而你的Socket.IO服务独立运行在3001端口，其握手和通信请求不受Laravel中间件管控，且你当前仅给Express配置了CORS，没有给Socket.IO单独配置跨域规则。

解决步骤 #

• 步骤1：修改Socket.IO服务端的初始化配置，显式开启跨域
  找到Node服务中初始化Socket.IO的代码，替换为以下内容：

// 替换原来的 const io = require('socket.io')(server);
const io = require('socket.io')(server, {
  cors: {
    origin: "http://dolphin.test", // 允许你的前端源访问，本地调试也可临时设为"*"
    methods: ["GET", "POST"],
    credentials: true
  }
});

• 步骤2：（可选）优化客户端连接配置
  修改Vue组件中Socket.IO客户端的初始化代码，减少轮询模式下的跨域预检异常：

// 替换原来的 socket : io("http://dolphin.test:3001"),
socket : io("http://dolphin.test:3001", {
  transports: ['websocket', 'polling'], // 优先使用websocket协议
  withCredentials: true
}),

• 步骤3：重启服务验证
  修改完代码后重启Node Socket.IO服务，再刷新前端页面测试连接即可。

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