Socket.io部署在Heroku后与gh-pages交互出现CORS错误如何解决？

问题1：origin属性应该填什么地址 #

CORS配置中的origin字段是允许访问服务端的前端来源地址，你应该填写gh-pages的前端地址，不需要填写Heroku服务端地址。

配置不生效的常见原因及修复方案 #

核心配置错误修复 #

你的现有配置只允许了GET请求，但Socket.IO默认的长轮询传输模式需要同时使用GET和POST两种请求方法，仅开放GET会导致POST请求直接被CORS拦截。
同时Heroku部署时不能硬编码固定端口，需要读取平台分配的环境变量端口，否则服务本身无法正常启动。

修复后的服务端配置参考：

// 优先读取Heroku分配的环境端口，本地开发时使用自定义端口
const port = process.env.PORT || 3000;
const io = require("socket.io")(port, {
  cors: {
    // 填写你实际的gh-pages地址，确保和前端实际访问地址完全一致，不要多写末尾斜杠
    origin: "https://name.github.io",
    // 新增POST方法，满足Socket.IO的传输要求
    methods: ["GET", "POST"],
    // 如果前端连接时携带Cookie、认证头等凭证，额外开启下方配置
    // credentials: true
  },
});

额外排查项 #

• 检查前端Socket.IO连接地址是否填写为你的Heroku应用地址，格式为https://name.herokuapp.com
• 如果origin匹配始终有问题，可以先临时将origin设为true（表示允许请求头中的origin访问）做测试，确认其他配置正常后再修改为正式的gh-pages地址

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