Firebase函数CORS问题：配置正确仍缺失Access-Control-Allow-Credentials头

核心问题分析 #

你的错误指向预检请求（OPTIONS）的响应中Access-Control-Allow-Credentials头为空，但前端请求明确设置了credentials: 'include'。这通常是因为Firebase v2的CORS自动处理逻辑和你手动添加的配置发生冲突，或者配置方式不符合v2的要求。

针对性修复方案 #

方案1：使用Firebase v2原生CORS配置（推荐） #

Firebase v2的onRequest支持更精细的CORS配置对象，完全不需要手动处理OPTIONS请求——内置逻辑会自动生成符合要求的预检响应。你之前的手动OPTIONS处理会覆盖内置逻辑，导致头信息不一致。

修改函数代码如下：

const { onRequest } = require('firebase-functions/v2/https');

exports.youtube = onRequest({
  timeoutSeconds: 360,
  // 替换cors: true为具体配置对象
  cors: {
    origin: 'http://localhost:5173', // 严格匹配前端源，不要用通配符
    credentials: true, // 明确允许凭证
    allowedMethods: ['GET', 'POST'],
    allowedHeaders: ['Authorization', 'Content-Type']
  }
}, (req, res) => {
  // 无需手动设置CORS头，内置配置会自动处理
  youtubeService(req, res);
});

方案2：Express集成时避免双重CORS配置 #

如果你用Express托管函数，要移除onRequest中的cors: true配置——否则Firebase的内置CORS会和Express的cors中间件冲突，导致头信息异常。

修改后的Express版本代码：

const youtubeService = express();
youtubeService.use(express.json());
youtubeService.use(cookieParser());

const corsOptions = {
  origin: "http://localhost:5173",
  methods: "GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS",
  credentials: true,
  allowedHeaders: ["Content-Type", "Authorization"],
};

youtubeService.use(cors(corsOptions));

// 你的REST端点逻辑

exports.youtube = onRequest({
    timeoutSeconds: 360,
    // 移除这里的cors: true，避免冲突
  },
  youtubeService
);

关键验证步骤 #

1. 重启Firebase本地模拟器（或重新部署线上函数），确保配置生效
2. 打开浏览器开发者工具→网络面板，筛选OPTIONS请求：
   • 确认响应头包含Access-Control-Allow-Credentials: true
   • 确认Access-Control-Allow-Origin严格等于http://localhost:5173（不能是通配符*）
3. 检查实际请求的响应头，确保同样包含上述两个头

额外注意事项 #

• 不要混用localhost和127.0.0.1：虽然都是本地地址，但浏览器会将它们视为不同的源，确保前端地址和函数配置的origin完全一致
• 本地开发时，确保Firebase模拟器的端口和你请求的地址匹配

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