Vue.js+Socket.IO配置Cloudflare防DDoS时遇跨域CORS报错求助

看起来你遇到的是典型的跨域资源共享（CORS）配置问题，结合Cloudflare代理和Socket.IO的特性，咱们一步步来排查解决：

1. 先修正服务器端的CORS配置 #

首先，你的服务器必须明确允许前端的Origin访问，而且要配合Socket.IO的凭证需求。比如如果用Node.js + Express，用cors中间件的话要这么配置：

const cors = require('cors');
const express = require('express');
const app = express();

// 注意：这里的origin要和前端页面的Origin完全一致，错误提示里你的Origin带了空格，先检查前端有没有写错域名！
app.use(cors({
  origin: 'http://my-domain.com', // 去掉多余空格，确保和前端地址完全匹配
  credentials: true, // 必须开启，因为Socket.IO会携带凭证（比如Cookie）
  methods: ['GET', 'POST'] // 允许Socket.IO需要的请求方法
}));

如果你的Socket.IO是直接挂载到HTTP服务器上的，也可以直接在Socket.IO的配置里设置CORS：

const io = require('socket.io')(httpServer, {
  cors: {
    origin: 'http://my-domain.com',
    credentials: true
  },
  allowEIO3: true, // 错误里显示EIO=3，对应Socket.IO v3版本，需要开启这个兼容选项
  transports: ['websocket', 'polling'] // 保留这两种传输方式，Cloudflare都支持
});

2. 检查Cloudflare的关键设置 #

Cloudflare代理Socket.IO需要几个前提：

• 开启WebSocket支持：在Cloudflare控制台的「Network」选项卡中，找到「WebSocket」并确保它是启用状态。
• 使用Cloudflare支持的端口：你当前用的2083端口不在Cloudflare默认代理的端口列表里（Cloudflare支持的HTTP端口是80、8080；HTTPS是443、8443）。非标准端口可能导致代理异常，建议换成8080或443（如果用HTTPS的话），或者在Cloudflare的「Network」里添加自定义端口（但需要确认你的服务器防火墙放行）。
• SSL模式匹配：如果前端用HTTPS，后端也必须配置HTTPS，Cloudflare的SSL模式设为「Full」或「Strict」，避免混合内容错误。

3. 修正前端Vue-Socket.io的配置 #

前端的连接配置也不能出错：

import VueSocketIO from 'vue-socket.io';

Vue.use(new VueSocketIO({
  debug: true,
  // 确保URL没有多余空格，和服务器地址完全一致
  connection: 'http://my-domain.com:2083', 
  options: {
    transports: ['websocket', 'polling'], // 和服务器端保持一致
    withCredentials: true // 必须开启，对应服务器的credentials设置
  }
}));

常见坑点提醒 #

• 错误提示里的Origin带了空格（Origin ' http://my-domain.com.c...），这大概率是前端代码里的域名写错了，先检查前端的Socket连接URL有没有多余空格！
• 确保HTTP/HTTPS一致：如果Cloudflare开启了SSL，前端必须用https://开头的地址，不能混用HTTP，否则会触发CORS和混合内容错误。
• 清除浏览器缓存：有时候旧的CORS缓存会导致问题，测试前先清除缓存或用无痕模式打开页面。

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