使用Angular连接Firebase实时数据库时遭遇CORS错误

API 探路者

2026-7-1

解决Angular向Firebase实时数据库发送数据的CORS错误

1. 修正请求URL（最可能的触发原因）

Firebase实时数据库的REST API要求所有HTTP请求的URL必须以.json结尾，你当前的请求URLhttps://pokedex-app-with-react-default-rtdb.firebaseio.com/messages缺少这个后缀，会导致预检请求返回非200状态码，进而触发CORS错误。

修改后的正确URL应为：

https://pokedex-app-with-react-default-rtdb.firebaseio.com/messages.json

React环境中可能自动处理了这个后缀，而Angular里遗漏了，这是两边表现不同的核心原因。

2. 用AngularFire SDK替代手动HTTP请求

手动发送POST请求容易踩跨域和格式的坑，直接用官方SDK能自动处理这些问题：

安装依赖：

npm install @angular/fire firebase

在app.module.ts中配置Firebase：

import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireDatabaseModule } from '@angular/fire/compat/database';

const firebaseConfig = {
  apiKey: "你的API_KEY",
  authDomain: "你的AUTH_DOMAIN",
  databaseURL: "https://pokedex-app-with-react-default-rtdb.firebaseio.com",
  projectId: "你的PROJECT_ID",
  storageBucket: "你的STORAGE_BUCKET",
  messagingSenderId: "你的SENDER_ID",
  appId: "你的APP_ID"
};

@NgModule({
  imports: [
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule
  ]
})
export class AppModule { }

在组件中发送数据：

import { AngularFireDatabase } from '@angular/fire/compat/database';

constructor(private db: AngularFireDatabase) {}

sendMessage(message: any) {
  this.db.list('/messages').push(message)
    .then(() => console.log('消息发送成功'))
    .catch(err => console.error('发送失败', err));
}