本地运行Angular+NX项目时Firebase Auth弹窗流异常排查

我用NX结合Firebase App Hosting部署Angular应用，线上部署正常，Authentication功能也能正常使用，但本地运行时弹窗授权流程出现异常——会打开https://my-project-id.firebaseapp.com/__/auth/handler...链接并报错。打开开发者工具后发现，调用结尾为getProjectConfig的接口返回403，响应提示来自referer https://my-project-id.firebaseapp.com/的请求被阻止。我对此感到困惑，因为我认为请求的referer应该是localhost才对。

我已经在Firebase Auth的授权域名中添加了真实域名和localhost，且Google Cloud控制台Credentials的OAuth2客户端ID已自动配置了合适的授权JavaScript来源和授权重定向URI。基础配置看起来都已覆盖到，我猜测是否需要在本地运行时调整Firebase配置选项，尤其是authDomain字段？

1. 调整本地环境的authDomain配置 #

你的猜测是对的，authDomain就是核心问题。线上环境使用my-project-id.firebaseapp.com没问题，但本地开发时，Firebase Auth弹窗授权会默认沿用线上的authDomain，导致请求的referer被识别为线上域名，进而触发403拦截。

本地运行时需要把authDomain改为localhost:<你的本地端口>（比如localhost:4200），可以通过NX的环境变量区分环境：

• 打开本地环境配置文件src/environments/environment.ts，修改Firebase配置：

export const environment = {
  production: false,
  firebase: {
    apiKey: "你的API_KEY",
    authDomain: "localhost:4200", // 替换成你的本地服务端口
    projectId: "my-project-id",
    storageBucket: "my-project-id.appspot.com",
    messagingSenderId: "你的SenderID",
    appId: "你的AppID"
  }
};

• 生产环境配置文件environment.prod.ts保持线上的authDomain: "my-project-id.firebaseapp.com"即可。

2. 核对OAuth2客户端的重定向URI #

虽然你提到Google Cloud的OAuth客户端已自动配置，但仍需确认是否包含本地重定向地址：

• 进入Google Cloud控制台的Credentials页面，找到对应项目的OAuth 2.0客户端ID
• 确保授权重定向URI中添加了http://localhost:<端口号>/__/auth/handler（本地开发一般用http，若你配置了https则改为https）

3. 清除浏览器缓存与站点数据 #

浏览器可能缓存了线上的Firebase配置，导致本地请求仍使用旧的authDomain：

• 打开开发者工具，切换到Application标签，找到「清除站点数据」选项执行清除
• 或者直接用无痕模式测试本地授权流程，避免缓存干扰

4. 确认NX的环境构建配置 #

确保NX本地构建时使用的是开发环境配置：

• 运行本地服务时可明确指定配置：nx serve --configuration=development（默认即为development，此步可验证）
• 检查angular.json中configurations.development字段，确认其关联的环境文件是src/environments/environment.ts

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