部署Firebase Functions后出现CORS错误的求助

最优方案：利用Firebase Hosting重写规则绕过CORS #

因为你的Hosting和Functions属于同一Firebase项目，完全可以通过配置Hosting的重写规则，让前端请求直接映射到Functions，这样请求会被视为同域请求，彻底避免CORS问题，步骤如下：

1. 在项目根目录的firebase.json中，修改hosting配置，添加rewrites规则：

{
  "hosting": {
    "public": "dist", // 替换为你的前端静态文件目录
    "rewrites": [
      {
        "source": "/api/**", // 匹配所有/api开头的请求
        "function": "api"    // 你的Functions导出名称（对应exports.api = functions.https.onRequest(app)里的api）
      }
    ]
  }
}

2. 重新部署Hosting和Functions：

firebase deploy --only hosting,functions

3. 前端请求地址改为Hosting域名下的路径，比如https://mysample.web.app/api/configSettings，而非直接调用Functions的独立域名。

如果坚持使用CORS配置，排查以下问题 #

1. 方案一（cors包）的问题 #

• 未定义whitelist变量：你的代码里缺少whitelist数组的初始化，导致whitelist.indexOf()报错，CORS配置直接失效。补充如下：

const whitelist = ['https://mysample.web.app', 'https://mysample.firebaseapp.com']; // 注意修正域名拼写

• 未将cors中间件应用到实际路由：你只处理了OPTIONS请求，但GET/POST等业务路由也需要绑定cors中间件，示例：

app.get('/api/configSettings', cors(corsOptionsDelegate), (req, res) => {
  // 你的路由逻辑
});

2. 方案二（自定义中间件）的问题 #

• 域名拼写错误：allowedOrigins里的https://mysample.firebase.webapp是错误格式，正确的Firebase默认域名应为https://mysample.firebaseapp.com，修正后再测试。
• 中间件顺序错误：CORS中间件必须放在所有路由定义之前，否则路由已返回响应，无法添加CORS头。示例：

// 先加载CORS中间件
app.use((req, res, next) => {
  // 你的CORS逻辑
});
// 再定义业务路由
app.get('/api/configSettings', (req, res) => { ... });

• OPTIONS预检请求未正确响应：前端发送OPTIONS请求时，需直接返回200状态码，避免执行后续逻辑：

app.use((req, res, next) => {
  const allowedOrigins = ['https://mysample.web.app', 'https://mysample.firebaseapp.com'];
  const origin = req.headers.origin;
  if (allowedOrigins.includes(origin)) {
       res.setHeader('Access-Control-Allow-Origin', origin);
  }
  res.setHeader('Access-Control-Allow-Methods', 'GET,POST,OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.setHeader('Access-Control-Allow-Credentials', true);
  // 处理OPTIONS请求
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  return next();
});

关于Firebase控制台配置 #

Firebase控制台不需要额外的CORS配置，Functions的CORS完全由代码层面控制，或通过上述Hosting重写规则解决。

内容的提问来源于stack exchange，提问作者Vaira Selvam RajaGopalan