如何解决Socket.io(^3.0.0)与Strapi Server(3.2.5)集成时的CORS错误？

你的问题核心在于Socket.io v3+ 默认关闭了跨域支持，而且Strapi中Socket.io的CORS配置和普通HTTP接口的配置是分开的，不能只靠Strapi自带的CORS设置来解决。下面是具体的修复步骤：

1. 修正Strapi后端的Socket.io初始化配置 #

修改./config/functions/bootstrap.js，在创建Socket.io实例时显式添加CORS配置，允许你的React应用（http://localhost:3000）的跨域请求：

module.exports = async () => {
  process.nextTick(() => {
    // 导入socket.io并传入CORS配置
    var io = require('socket.io')(strapi.server, {
      cors: {
        origin: "http://localhost:3000", // 允许你的React应用域名
        methods: ["GET", "POST"], // Socket.io常用的请求方法
        credentials: true // 如果需要携带cookie等凭证，开启这个
      }
    });

    strapi.io.on('connection', async function(socket) {
      console.log('a user connected');
      socket.on('sendMessage', (msg) => {
        console.log("msg is", msg);
        // 这里可以添加广播消息的逻辑，比如：
        // strapi.io.emit('receiveMessage', msg);
      })
      socket.on('disconnect', () =>{
        console.log('a user disconnected')
      });
    });

    strapi.io = io;
  })
};

2. 确保Strapi全局CORS配置正确（可选但推荐） #

虽然Socket.io的CORS是单独配置的，但为了保证其他API接口的跨域正常，检查./config/security.js（如果没有就创建）里的CORS设置：

module.exports = {
  cors: {
    enabled: true,
    origin: "http://localhost:3000",
    methods: ["GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"],
    headers: ["Content-Type", "Authorization"],
    credentials: true
  }
};

3. 前端Socket.io连接的优化（可选） #

在React组件中，连接Socket.io时可以明确指定路径和凭证选项，确保兼容性：

import io from 'socket.io-client';
// 添加连接选项
const socket = io('http://localhost:1337', {
  withCredentials: true,
  path: '/socket.io' // Socket.io默认的路径，确保和后端一致
});

const handleClick = () => {
  const username = props.username;
  socket.emit("sendMessage", { chatMessage, username });
}

为什么之前的方法无效？ #

Strapi自带的CORS配置只针对普通的HTTP请求，而Socket.io有自己的握手机制，它的CORS需要在Socket.io实例初始化时单独配置，这也是你之前尝试普通CORS方案无效的原因。Socket.io v3+相比v2做了很多默认配置的变更，其中就包括默认禁用跨域，所以必须显式开启。

重启你的Strapi服务和React应用，应该就能解决CORS错误了。

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