Firebase Hosting前端与Heroku后端的Socket.io生产环境连接问题

从你的报错信息一眼就能看出问题核心：浏览器检测到Access-Control-Allow-Origin响应头的值是带末尾斜杠的https://PROJECT_NAME_HERE.web.app/，但实际发起请求的源是不带斜杠的https://PROJECT_NAME_HERE.web.app。浏览器对CORS源的匹配是严格的字符级校验，哪怕只差一个斜杠也会判定为不相等，直接拦截请求。

下面是具体的修复步骤：

1. 统一去掉所有地址的末尾斜杠 #

不管是前端的socket连接地址，还是后端的CORS允许源，都要把末尾的斜杠去掉，保持完全一致：

前端环境配置（environment.prod.ts） #

把生产环境的socket_url修改为：

export const environment = {
  production: true,
  socket_url: "https://PROJECT_NAME_HERE.herokuapp.com" // 去掉:3000和末尾斜杠
};

注意：Heroku会自动处理端口映射，不需要手动指定:3000。后端代码里的process.env.PORT会使用Heroku分配的内部端口，外部通过HTTPS默认的443端口访问即可。

后端Socket.io配置（server.ts） #

把生产环境的socketUrl修改为不带斜杠的版本：

// 生产环境配置示例
const socketUrl = "https://PROJECT_NAME_HERE.web.app"; // 去掉末尾的/
const io = new Server(server, {
  cors: {
    origin: socketUrl,
    methods: ["GET", "POST"]
  }
});

2. 可选：改用动态CORS匹配（更健壮） #

如果担心后续再出现类似的拼写或格式问题，可以把Socket.io的CORS配置改成动态验证的方式，同时兼容开发和生产环境：

const io = new Server(server, {
  cors: {
    origin: (origin, callback) => {
      // 列出所有允许的源
      const allowedOrigins = [
        "https://PROJECT_NAME_HERE.web.app",
        "http://localhost:4200" // 开发环境地址
      ];
      // 允许无origin的请求（比如某些工具发起的请求），或者匹配到允许的源
      if (!origin || allowedOrigins.includes(origin)) {
        callback(null, true);
      } else {
        callback(new Error("Not allowed by CORS"));
      }
    },
    methods: ["GET", "POST"]
  }
});

这种方式可以避免手动写地址时的细节错误，也更灵活。

3. 验证配置一致性 #

最后确认两个关键点：

• 前端Socket连接的地址（environment.prod.ts里的socket_url）是https://PROJECT_NAME_HERE.herokuapp.com
• 后端允许的前端源（server.ts里的socketUrl）是https://PROJECT_NAME_HERE.web.app

为什么开发环境没问题？因为你开发环境用的http://localhost:4200和http://localhost:3000都没有末尾斜杠，所以源匹配完全一致，不会触发CORS错误。

内容的提问来源于stack exchange，提问作者Milan Ferus-Comelo