如何在 Angular 中修复 Firebase 函数“错误请求”错误？

javascript

2024-03-21 01:39:05

在 Angular 中解决 Firebase 函数的“错误请求”错误

简介

集成 Firebase 函数到你的 Angular 应用程序时，你可能会遇到令人沮丧的“错误请求”错误。本文深入探讨这一常见的错误，提供详细的步骤帮助你解决它。

原因和解决方案

1. 缺少查询参数

Firebase 函数通常通过查询参数接收数据。确保你在 Angular 代码中正确传递了必需的参数。

2. CORS 配置不当

启用 CORS（跨域资源共享）以允许你的 Angular 应用程序从不同域调用函数。

3. Firebase SDK 版本不兼容

确保你使用的 Angular Fire SDK 和 Firebase 函数 SDK 的版本兼容。

4. 网络连接问题

检查你的网络连接是否稳定。使用 Chrome 开发者工具的“网络”选项卡来调试请求。

5. 函数代码问题

仔细检查你的 Firebase 函数代码是否有语法或逻辑错误。确保函数正确处理传入的参数。

解决代码的示例

修改你的 Angular 代码如下：

import { Functions, httpsCallable } from '@angular/fire/functions';

private functions: Functions = inject(Functions);

constructor(private route: ActivatedRoute) {
  const id = this.route.snapshot.params['id'];
  const getQuizById = httpsCallable(this.functions, 'getQuizById');

  getQuizById({ id }) // <- REMOVE THE HARDCODED ID
    .then((result) => {
      console.log(result);
    });
}