Firebase调用Cloud Function遇跨域策略问题求助

你犯了一个关键错误：客户端用httpsCallable调用可调用云函数，但云端写的是onRequest触发的HTTP函数，这俩完全不兼容，直接导致你的CORS设置根本没机会生效。

解决方案1：改成可调用云函数（推荐） #

可调用函数（onCall）是Firebase专门为客户端SDK设计的，会自动处理CORS、身份验证等逻辑，不用手动设置响应头。

修改你的云端index.js代码：

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

exports.addMessage = onCall(async (request) => {
  // 可调用函数的参数在request.data里，不是req.query
  const original = request.data.text;
  
  const writeResult = await getFirestore().collection("messages").add({ original: original });
  
  // 直接返回结果，Firebase会自动处理CORS
  return { result: `Message with ID: ${writeResult.id} added.` };
});

客户端代码不用改，重新部署云函数后就能正常调用了。

解决方案2：坚持用HTTP触发函数（不推荐） #

如果一定要用onRequest，那客户端不能用httpsCallable，得换成普通的HTTP请求（比如fetch），同时要处理浏览器的OPTIONS预检请求：

云端index.js修改： #

const { onRequest } = require("firebase-functions/v2/https");
const { getFirestore } = require("firebase-admin/firestore");

exports.addMessage = onRequest(async (req, res) => {
  // 处理OPTIONS预检请求
  if (req.method === "OPTIONS") {
    res.set("Access-Control-Allow-Origin", "*");
    res.set("Access-Control-Allow-Methods", "GET, POST");
    res.set("Access-Control-Allow-Headers", "Content-Type");
    res.status(204).send("");
    return;
  }

  // 处理正常请求
  const original = req.query.text;
  const writeResult = await getFirestore().collection("messages").add({ original: original });
  
  res.set("Access-Control-Allow-Origin", "*");
  res.json({ result: `Message with ID: ${writeResult.id} added.` });
});

客户端代码修改： #

// 不用httpsCallable，直接fetch
fetch("https://us-central1-mysecretsite.cloudfunctions.net/addMessage?text=test")
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

为什么之前的设置没用？ #

httpsCallable调用时，Firebase会给请求添加特定的授权头和格式要求，而onRequest函数没有处理这些规则，请求会被Firebase的云函数网关直接拦截（返回403），你的代码里设置的CORS头根本没机会被发送到浏览器，所以才会提示“CORS header缺失”。

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