测试Firebase的https.onCall函数出现CORS跨域报错如何解决？

错误根因 #

你遇到的Redirect is not allowed for a preflight request报错本质不是CORS配置缺失，https.onCall类型云函数默认会自动处理跨域逻辑，该报错是预检请求触发了Firebase服务的重定向规则导致的，大多由调用参数不匹配引发。

生产环境排查步骤 #

• 确认函数部署区域与前端调用区域完全一致：默认部署区域为us-central1，如果部署时指定了其他区域（如asia-southeast1），前端初始化时必须显式传入相同区域：

import { getFunctions, httpsCallable } from "firebase/functions";

// 区域参数必须和部署时完全匹配
const functions = getFunctions(app, "你的部署区域");
const testFunc = httpsCallable(functions, "你的函数名");

• 确认函数名拼写完全正确，大小写敏感，拼写错误会触发Firebase的404重定向，进而导致预检请求失败
• 部署完成后等待2-3分钟再测试，刚完成部署的函数会存在短暂的重定向逻辑

本地模拟器环境排查步骤 #

• 前端必须显式配置连接函数模拟器，端口与firebase.json中配置的functions端口完全一致，默认端口为5001：

import { getFunctions, connectFunctionsEmulator } from "firebase/functions";

const functions = getFunctions(app);
// 端口和模拟器配置保持一致
connectFunctionsEmulator(functions, "localhost", 5001);

• 不要手动修改函数的调用路径，onCall函数不支持自定义访问路径，手动拼接路径会触发重定向

兜底配置方案 #

如果以上步骤排查后仍存在跨域问题，可以在函数定义时显式传入CORS允许域名列表：

const { onCall } = require("firebase-functions/v2/https");

exports.testFunc = onCall({
  // 传入允许的域名列表，生产环境不要设置为*
  cors: ["http://localhost:8081", "https://你的生产域名"]
}, async (req) => {
  // 函数业务逻辑
  return { code: 0, data: "success" };
});

内容的提问来源于stack exchange，提问作者Chris B.