Firebase V9调用onCall云函数触发CORS Policy错误求助

你遇到的CORS报错本质是请求地址不匹配导致，Firebase onCall 类型的云函数会自动处理CORS头，无需手动配置，按以下场景对应修改即可：

场景1：本地使用Functions模拟器调试 #

你当前前端默认请求线上云函数，线上环境默认不允许http://localhost:3000跨域访问，需要额外配置前端连接本地模拟器：

1. 修改Firebase初始化代码，新增模拟器连接逻辑：

import { initializeApp } from 'firebase/app';
// 新增导入connectFunctionsEmulator
import { getFunctions, connectFunctionsEmulator } from 'firebase/functions';

const firebaseConfig = {
  apiKey: "XXXX",
  authDomain: "XXXX",
  projectId: "XXXX",
  storageBucket: "XXXX",
  messagingSenderId: "XXXX",
  appId: "XXXX",
  measurementId: "XXXX"
};
export const firebaseApp = initializeApp(firebaseConfig);
// 显式传入firebaseApp实例，第二个参数为云函数部署地域
export const functions = getFunctions(firebaseApp, 'us-central1');

// 开发环境下连接本地Functions模拟器
if (process.env.NODE_ENV === 'development') {
  // 5001为Functions模拟器默认端口，若自定义端口请对应修改
  connectFunctionsEmulator(functions, 'localhost', 5001);
}

2. 启动本地模拟器时确保Functions模块正常启动，端口与上述配置一致。

场景2：生产环境调用已部署的云函数 #

1. 确保getFunctions方法的第二个参数与云函数实际部署的地域完全一致，你报错信息中的地域为us-central1，若部署时修改了地域请对应替换。
2. 确认云函数名称与后端定义的名称完全一致，无拼写错误。
3. 若需要自定义允许跨域的域名，可在Firebase控制台的Hosting配置中添加自定义域名，或在云函数所在项目的GCP控制台配置跨域规则。

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