为何AngularFire/Firebase本地开发调试令牌请求仍遭拒绝？

问题根源 #

你遇到的API_KEY_HTTP_REFERRER_BLOCKED错误，核心原因是Firebase API密钥的HTTP Referrer限制未放行本地开发地址。虽然App Check调试令牌能绕过设备级验证，但调用exchangeDebugToken接口时，API密钥的Referrer白名单规则依然会生效，localhost不在白名单内就会被拦截。

解决步骤 #

1. 打开Google Cloud Console，找到你的项目对应的API密钥（路径：API和服务 -> 凭据）
2. 编辑该API密钥的「HTTP 引用者（网站）」限制：
   • 添加本地开发地址，例如：
     • http://localhost:8080/*
     • 若使用Angular默认端口4200，补充http://localhost:4200/*
   • 末尾的*是通配符，用于匹配该端口下的所有路径
3. 保存配置，等待1-2分钟让规则生效
4. 若仍有问题，检查：
   • 调试令牌是否与Firebase控制台中注册的完全一致
   • Angular环境变量environment.appCheckDebug是否正确赋值

补充说明 #

Postman中添加Firebase托管URL作为Referer头能成功，是因为该URL已在API密钥的Referrer白名单内，符合API密钥的访问规则——这和App Check调试令牌的验证逻辑是两个独立环节。

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