Firebase Hosting调用Function被CORS拦截的问题求助

核心错误原因 #

你混用了两种完全独立的Firebase云函数类型，二者的调用协议、CORS处理逻辑完全不兼容，这是报错的根本原因：

• 后端定义的是functions.https.onRequest类型的普通HTTP函数
• 前端用httpsCallable方法调用，该方法仅支持调用functions.https.onCall类型的可调用云函数

修复方案二选一即可 #

方案1：改用可调用云函数（推荐，无需手动配置CORS） #

直接修改后端函数定义，可调用云函数会自动处理CORS、鉴权等通用逻辑：

export const helloWorld = functions.https.onCall((data, context) => {
  functions.logger.info("Hello logs!", {structuredData: true});
  // 直接返回响应数据即可，无需操作响应对象
  return "Hello from Firebase!";
});

前端现有调用代码无需修改，如果是本地模拟器测试，需要额外加模拟器指向配置：

const functions = firebase.functions();
// 本地测试时添加，生产部署前删除
functions.useEmulator("localhost", 5001);

方案2：保留普通HTTP函数，手动配置CORS+修改前端调用方式 #

如果需要继续使用onRequest类型的HTTP函数，需要做两处修改：

1. 后端手动添加CORS响应头，处理预检请求：

export const helloWorld = functions.https.onRequest((req, res) => {
  // 生产环境可将*替换为你的正式Hosting域名，提升安全性
  res.set('Access-Control-Allow-Origin', '*');
  res.set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.set('Access-Control-Allow-Headers', 'Content-Type');
  // 处理OPTIONS预检请求
  if (req.method === 'OPTIONS') {
    return res.status(204).send('');
  }
  functions.logger.info("Hello logs!", {structuredData: true});
  res.send("Hello from Firebase!");
});

2. 前端不再使用httpsCallable调用，改用普通HTTP请求：

fetch('你的云函数完整访问地址')
  .then(res => res.text())
  .then(data => console.log(data));

本地测试额外注意 #

本地用模拟器测试时，要确保同时开启Hosting和Functions模拟器，不要出现本地Hosting调用线上函数、或者线上页面调用本地函数的跨环境场景，避免额外触发CORS限制。

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