Angular调用Firebase GET请求报Unauthorized错误如何解决

相关参考截图 #

• Firebase安全规则配置页截图
• Firebase数据库基础配置页截图
• 项目内API URL定义位置代码截图
• 接口调用核心逻辑代码截图

问题描述 #

在Angular项目中调用Firebase API拉取已上传的JSON文件数据时，触发Unauthorized request（未授权请求）报错。先后尝试更换POST请求方式、切换其他服务与组件测试，问题仍存在。

排查与解决方案 #

按以下优先级逐一排查：

• 校验Firebase安全规则
  新创建的Firebase实例默认规则会拦截所有无有效身份凭证的请求，本地调试阶段可临时放开读权限，规则示例：

  {
    "rules": {
      ".read": true,
      ".write": false
    }
  }
  

  注意：正式上线前必须收紧规则，配置匹配业务的鉴权逻辑，避免数据泄露。
• 核对请求URL格式
  Firebase Realtime Database拉取JSON数据的接口，路径末尾必须拼接.json后缀，正确格式为https://<你的数据库ID>.firebasedatabase.app/目标数据路径.json，漏写后缀会直接返回未授权错误。
• 确认数据库地址匹配
  代码中配置的数据库地址必须和Firebase控制台展示的地址完全一致：如果创建数据库时选择了非默认美区节点，地址会携带对应区域前缀，错用其他项目、其他区域的数据库地址都会触发权限报错。
• 检查请求头配置
  若使用Angular原生HttpClient发起请求，未接入Firebase Auth做身份校验的场景下，不要手动添加格式错误的Authorization请求头，无效鉴权信息会直接被服务端拦截。
• 接入Firebase Auth场景的额外校验
  确认请求发起时用户已完成登录，本地存储的身份Token未过期，同时安全规则中已经为对应用户配置了目标路径的读权限。

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