使用Firebase实现Google账号登录时遭遇CORS错误求助

排查方向1：后端Socket.io的CORS配置 #

你的后端部署在Heroku，此前功能正常，添加Firebase后出现问题，核心原因大概率是生产环境下的Socket.io CORS策略未将http://localhost纳入允许访问的来源列表。

• 找到后端Socket.io的初始化代码，补充正确的CORS配置：

  // Node.js + Socket.io v4+ 示例
  const io = require("socket.io")(server, {
    cors: {
      origin: ["http://localhost:8100", "https://your-prod-domain.com"], // 加入Ionic本地默认端口8100，替换正式域名
      methods: ["GET", "POST"]
    }
  });
  

  注：若使用旧版Socket.io，需将cors.origin替换为origins字段，适配对应版本语法。

• 若后端使用Express的cors中间件，同步更新配置：

  const cors = require('cors');
  app.use(cors({
    origin: ["http://localhost:8100", "https://your-prod-domain.com"],
    credentials: true // 若请求需携带cookie或认证信息则开启
  }));
  

排查方向2：Firebase环境配置的影响 #

你将FirebaseConfig写入environment.prod.ts后，本地测试生产环境时，前端会切换到生产配置，但后端CORS策略仅允许正式域名访问，未覆盖localhost来源。

• 本地测试生产环境阶段，可临时修改environment.prod.ts中的API相关配置，确保请求的后端地址对应的CORS规则包含localhost；或在后端临时放宽CORS限制（仅限测试，上线前务必改回）。

本地调试临时方案（禁止生产环境使用） #

仅用于本地调试时，可临时将后端CORS设置为允许所有来源：

// Socket.io配置
cors: {
  origin: "*",
  methods: ["GET", "POST"]
}
// Express cors中间件配置
app.use(cors({ origin: "*" }));

额外注意事项 #

• 确认Ionic本地运行端口：默认是8100，若自定义过端口，需将对应http://localhost:xxx加入后端CORS允许列表。
• 正式部署前，必须将CORS的origin限制为你的官方域名，避免安全风险。

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