Firebase Callable Function Emulator配置无效，为何仍调用生产端点触发CORS异常？

问题现象 #

• 已按标准配置Firebase Functions模拟器，但项目依旧调用生产环境Cloud Functions端点（https://us-central1-{project-name}.cloudfunctions.net/addMessage2）
• 触发CORS错误：

Access to fetch at 'https://us-central1-{project-name}.cloudfunctions.net/addMessage2' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

• 模拟器已正常初始化，日志显示：

✔ functions[us-central1-addMessage2]: http function initialized (http://127.0.0.1:5001/{project-name}/us-central1/addMessage2).

排查与解决步骤 #

1. 确认环境变量useEmulators配置 #

检查environment.ts文件，确保useEmulators为true，且开发模式下加载的是该环境文件：

// environment.ts
export const environment = {
  production: false,
  useEmulators: true,
  firebase: {
    // 你的Firebase项目配置
  }
};

2. 检查Functions实例初始化逻辑 #

• 确保provideFunctions在initializeApp之后配置（你的代码已满足，但需排查是否有其他地方单独调用getFunctions()创建未连接模拟器的实例）
• 若Functions部署在非默认区域，需显式指定区域：

provideFunctions(() => {
  const functions = getFunctions(getApp(), 'us-central1'); // 显式匹配部署区域
  if (environment.useEmulators) {
    connectFunctionsEmulator(functions, 'localhost', 5001);
  }
  return functions;
}),

3. 清除缓存并重启服务 #

• 浏览器可能缓存了旧的端点配置，执行硬刷新（Ctrl+Shift+R）或清除浏览器缓存
• 重启Angular开发服务器（停止ng serve后重新启动）

4. 验证Callable Functions调用方式 #

确保调用时使用依赖注入的Functions实例，而非手动创建：

// 组件/服务中
import { Functions, httpsCallable } from '@angular/fire/functions';

constructor(private functions: Functions) {}

async callAddMessage() {
  const addMessage = httpsCallable(this.functions, 'addMessage2');
  const result = await addMessage({ text: '测试内容' });
  // 处理返回结果
}

5. 验证模拟器连接状态 #

在浏览器控制台执行以下代码，检查输出的端点是否为模拟器地址：

firebase.functions()._url('addMessage2')

若输出仍为生产环境地址，说明模拟器未正确连接，需重新检查配置逻辑。

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