Firebase第二代Cloud Functions Callable接口CORS错误求助

一、IAM服务账号关联配置 #

第二代Cloud Functions默认使用项目的App Engine默认服务账号运行，若需自定义服务账号：

• 创建账号：在Google Cloud控制台的IAM与管理>服务账号页面，新建服务账号并授予所需权限（如Cloud Functions Developer、Firebase Admin SDK Administrator Service Agent）。
• 部署指定：
  1. CLI部署时添加参数：

     firebase deploy --only functions:CallUppercaseMe2ndGen --service-account=你的服务账号邮箱
     

  2. 或在firebase.json中配置：

     {
       "functions": {
         "v2": {
           "CallUppercaseMe2ndGen": {
             "serviceAccount": "你的服务账号邮箱"
           }
         }
       }
     }
     

• 权限验证：确保该服务账号具备函数执行权限，同时Angular端需通过Firebase Auth完成认证，这样request.auth才能正常获取用户信息。

二、模拟器CORS问题修复 #

firebase.json中的CORS配置仅对线上部署的函数生效，本地模拟器需单独处理：

• Angular代理方案：
  1. 在项目根目录创建proxy.conf.json：

     {
       "/CallUppercaseMe2ndGen": {
         "target": "http://localhost:5001/你的项目ID/us-central1",
         "secure": false,
         "changeOrigin": true
       }
     }
     

  2. 启动Angular时加载代理：

     ng serve --proxy-config proxy.conf.json
     

• 更新Firebase CLI：确保使用最新版本的Firebase工具（npm install -g firebase-tools），新版本模拟器会自动处理本地请求的CORS头。

三、其他方案的说明 #

• onRequest的cors库：仅适用于HTTP触发的onRequest函数，onCall是Firebase封装的RPC接口，正常部署后会自动处理CORS，无需手动添加。
• httpsCallableFromURL：官方不推荐是因为硬编码URL会增加维护成本，若使用它能解决问题，大概率是Angular端Firebase初始化时未指定正确区域，检查初始化代码：

  import { initializeApp } from "firebase/app";
  import { getFunctions } from "firebase/functions";
  
  const app = initializeApp(你的Firebase配置);
  const functions = getFunctions(app, 'us-central1'); // 必须匹配函数部署区域
  

• onCall配置cors参数：第二代onCall无此配置项，cors参数仅针对onRequest，所以该操作无效是正常的。

额外排查项 #

1. 确认函数部署成功，在Firebase控制台检查函数状态与URL是否正确。
2. 检查Angular端用户是否已完成Firebase Auth登录，虽然未登录不会直接导致CORS错误，但函数返回null可能混淆问题排查。
3. 验证Secret配置：defineSecret("12345abcde")中的参数是Secret的名称，需在Google Cloud Secret Manager中创建同名Secret并存储实际密钥值，否则函数运行会报错。

内容的提问来源于stack exchange，提问作者Thomas David Kehoe