Angular项目读写Firebase Realtime Database报CORS及请求失败问题

DevOps 小满

2026-9-26

问题原因

接口请求失败原因

代码中PUT请求的URL不完整，缺少https://协议前缀，也没有遵循Firebase Realtime Database REST API要求的.json路径后缀，请求本身构造非法
你请求URL后拼接的auth参数为空字符串，未携带合法的身份认证凭证
Firebase Realtime Database默认安全规则禁止未授权的读写操作，跨域预检OPTIONS请求被拦截返回非200状态码，触发CORS校验失败

样式加载失败原因

引入Google字体的链接中family=参数值为空，服务端返回HTML格式的错误页面，与预期的CSS MIME类型不符，被浏览器的严格MIME校验拦截。

解决方案

修正接口请求代码，补全合法的请求路径：

storeRecipes() { 
  const recipes = this.recipeService.getRecipes(); 
  // 补全https前缀，添加存储节点路径和必须的.json后缀
  this.http
    .put('https://ng-course-recipe-book-a84eb-default-rtdb.europe-west1.firebasedatabase.app/recipes.json', recipes ) 
    .subscribe(response => { console.log(response); }); 
}

调整数据库安全规则：
开发调试阶段可以临时开放权限，进入Firebase控制台对应项目的Realtime Database「规则」页，替换为以下规则（上线前必须修改为带认证校验的安全规则，避免数据泄露）：
```
{
  "rules": {
    ".read": true,
    ".write": true
  }
}
```
如果已经接入Firebase Auth认证体系，无需修改为公开规则，只需在请求头或者query参数中携带用户的有效ID token即可。
修复字体引入链接：
找到项目中引入Google字体的link标签，补全family参数的字体名称，示例：
```
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
```