本地开发环境下解决AngularFire Functions的CORS跨域问题的正确方案

这个CORS问题的核心原因很明确——你前端用的是AngularFire的httpsCallable（专门调用FirebaseCallable云函数的API），但后端写的是onRequest类型的HTTP函数，这俩完全不匹配，导致CORS头没被正确设置。

给你两种靠谱的解决办法，推荐第一种，因为更贴合AngularFire的使用场景：

方法一：把后端改成Callable云函数（推荐） #

Firebase的Callable函数（用onCall定义）会自动处理CORS、请求序列化、认证传递这些细节，和AngularFire的httpsCallable完美适配，不需要手动折腾CORS配置。

修改你的后端云函数代码：

import * as functions from 'firebase-functions';
import * as admin from 'firebase-admin';
admin.initializeApp();

// 把onRequest改成onCall
export const getDirections = functions.region('europe-west6').https.onCall(async (data, context) => {
  // 从data对象里拿参数，而不是request.query
  const lat1 = data.lat1 || 0;
  const lng1 = data.lng1 || 0;
  const lat2 = data.lat2 || 0;
  const lng2 = data.lng2 || 0;

  // 这里写你的路线计算逻辑
  const answer = "你的路线结果";

  // 直接返回结果，Firebase会自动处理响应格式和CORS头
  return answer;
});

前端代码不需要修改，还是你原来的httpsCallable调用方式就行。

最后别忘了重新部署云函数：

firebase deploy --only functions:getDirections

方法二：保留HTTP函数，手动配置CORS并修改前端请求 #

如果你不想改后端的函数类型，那需要手动给onRequest函数添加CORS支持，同时前端改成普通HTTP请求（不能再用httpsCallable）。

步骤1：后端添加CORS中间件 #

先安装cors依赖：

npm install cors

然后修改后端代码：

import * as functions from 'firebase-functions';
import * as admin from 'firebase-admin';
import * as cors from 'cors';

admin.initializeApp();

// 配置CORS，允许localhost:8100的请求
const corsHandler = cors({ origin: 'http://localhost:8100' });

export const getDirections = functions.region('europe-west6').https.onRequest((request, response) => {
  // 先用corsHandler处理请求，确保CORS头正确设置
  corsHandler(request, response, () => {
    const lat1: number = +(request.query.lat1 ?? '0');
    const lng1: number = +(request.query.lng1 ?? '0');
    const lat2: number = +(request.query.lat2 ?? '0');
    const lng2: number = +(request.query.lng2 ?? '0');

    // 你的业务逻辑
    const answer = "你的路线结果";

    response.status(200).send(answer);
  });
});

步骤2：前端改用HttpClient调用 #

在组件里注入HttpClient：

import { HttpClient, HttpParams } from '@angular/common/http';

// ...

constructor(private http: HttpClient) {}

然后替换原来的httpsCallable调用：

const functionUrl = 'https://europe-west6-xxxxxx-yyyyyy.cloudfunctions.net/getDirections';
const params = new HttpParams()
  .set('lat1', lastStop.coordinates.latitude.toString())
  .set('lng1', lastStop.coordinates.longitude.toString())
  .set('lat2', step.coordinates.latitude.toString())
  .set('lng2', step.coordinates.longitude.toString());

const result = await this.http.get(functionUrl, { params }).toPromise();

同样，修改后要重新部署云函数。

为什么会出现这个问题？ #

简单说：

• httpsCallable发送的请求格式和onRequest函数预期的不一样，而且Firebase只会给onCall函数自动添加CORS头
• 你用错了前端调用方式和后端函数类型的组合，导致预请求（OPTIONS）没有得到正确的CORS响应

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