Vue+Strapi使用Socket.io时出现CORS跨域报错如何解决

报错直接指向服务端CORS规则配置不匹配：当前Strapi侧部署的Socket.io服务，返回的Access-Control-Allow-Origin响应头仅放行http://localhost:5000来源，既未包含本地Vue开发服务的http://localhost:8080地址，也未添加你持有的自有生产域名，浏览器按同源策略拦截了跨域请求。

按以下两步配置即可修复，注意Socket.io v4版本的CORS规则独立于Strapi原生HTTP服务的CORS配置，不要改错位置。

1. 修正Strapi服务端Socket.io CORS配置 #

找到Strapi项目中初始化Socket.io服务的代码（通常位于src/index.js启动逻辑、或者自定义的Socket插件bootstrap文件中），在初始化Server实例时传入正确的cors配置，把所有需要放行的前端来源加入白名单：

const { Server } = require("socket.io");

// 初始化Socket.io实例，绑定Strapi的HTTP服务
const io = new Server(strapi.server.httpServer, {
  cors: {
    origin: [
      "http://localhost:8080", // 本地Vue开发服务地址
      "https://你的自有域名", // 生产环境前端部署的完整域名
      // 如有测试、预发布环境的前端地址，一并加入该数组
    ],
    methods: ["GET", "POST"],
    credentials: true // 前端需要传递Cookie、鉴权token时开启该配置
  }
});

• 开发阶段临时调试可暂时将origin设为*允许所有来源，生产环境必须替换为明确的域名白名单，禁止使用通配符，避免跨域安全风险。
• 不要尝试修改Strapi全局middleware中的CORS配置，该配置仅对Strapi原生REST/GraphQL接口生效，不会作用于Socket.io的连接请求。

2. 校验前端Vue侧连接配置 #

你贴出的前端代码存在两个需要修正的点：

• 连接地址拼写检查：你写的https://my-domen/存在拼写错误，替换为你实际持有的正确域名，本地开发时建议直接连接本地Strapi服务地址（Strapi默认端口为1337）。
• 建议通过环境变量区分开发/生产环境的连接地址，避免硬编码导致的环境适配问题。

修正后的main.js配置参考：

import { createApp } from 'vue'
import App from './App.vue'
import store from '@/store.js'
import VueSocketIO from 'vue-3-socket.io'
import SocketIO from 'socket.io-client'

const app = createApp(App);

// 按运行环境自动切换Socket服务地址
const socketConnectionUrl = import.meta.env.MODE === 'development'
  ? 'http://localhost:1337' // 本地Strapi服务地址，端口和你本地启动的Strapi保持一致
  : 'https://你的Strapi服务部署域名'

app.use(new VueSocketIO({
  debug: import.meta.env.MODE === 'development', // 开发环境开启debug日志，生产环境关闭
  connection: SocketIO(socketConnectionUrl, {
    autoConnect: true
  }),
  vuex: {
    store,
    actionPrefix: "SOCKET_",
    mutationPrefix: "SOCKET_"
  }
}))

app.mount('#app')

配置完成后重启Strapi服务和Vue开发服务，清空浏览器缓存后再验证。如果仍报错，可在浏览器Network面板中找到socket.io的polling请求，检查响应头里的Access-Control-Allow-Origin值是否和当前页面origin一致，确认配置是否生效。

内容的提问来源于stack exchange，提问作者Артём Рачук