从 Angular 调用 Firebase 函数会出现“错误请求”错误，但从 URL 调用可以正常工作

Question

我对 Firebase 函数非常陌生。我创建了一个名为 getQuizById() 的函数。该函数以 JSON 格式返回测验。如果我直接通过 URL 调用该函数，它会按预期返回 JSON 数据。例如：

https://us-central1-example-f1afa.cloudfunctions.net/getQuizById?id=ef8GwUuHt8X4XQJBIgZf

既然它有效，我需要从我的 Angular 17 应用程序调用相同的函数，这是我为此使用的代码：

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

  private functions: Functions = inject(Functions);

  constructor(private route: ActivatedRoute) {
    // get the id fdrom the url
    const id = this.route.snapshot.params['id'];

    const getQuizById = httpsCallable(this.functions, 'getQuizById');

    getQuizById({ id: 'ef8GwUuHt8X4XQJBIgZf' }) // <- HARD CODED ID JUST FOR TESTING
      .then((result) => { // <- ERROR HERE
        console.log(result);
      });
  }

我直接从 Firebase 网站上的文档中获取了此代码示例，因此我认为我做得正确。尽管如此，函数本身并未接收传入的 ID 参数，因此它失败并显示代码 400（“需要测验 ID”）。

这是函数本身的代码，以防有帮助。

// The Cloud Functions for Firebase SDK to create Cloud Functions and triggers.
const { logger } = require("firebase-functions");
const { onRequest } = require("firebase-functions/v2/https");
const { cors } = require("cors")({ origin: true });

// The Firebase Admin SDK to access Firestore.
const { initializeApp, applicationDefault, cert } = require("firebase-admin/app");
const { getFirestore, Timestamp, FieldValue, Filter } = require("firebase-admin/firestore");

initializeApp();

const db = getFirestore();

exports.getQuizById = onRequest({ cors: true }, async (request, response) => {
    const quizId = request.query.id;

    if (!quizId) {
        response.status(400).send("Quiz ID is required");
        return;
    }

    try {
        const quizDocref = db.collection("quizzes").doc(quizId);
        const quizDoc = await quizDocref.get();

        if (!quizDoc.exists) {
            response.status(404).send("Quiz not found. ID: " + quizId);
            return;
        }

        response.status(200).json(quizDoc.data());
    } catch (error) {
        console.error("Error getting quiz document:", error);
        response.status(500).send("Internal Server Error");
    }
});

Answer 1

您混淆了 HTTP 和可调用类型函数。您的函数被定义为 HTTP 类型函数，但您的客户端代码尝试将其作为可调用类型函数进行调用。这根本不起作用，因为可调用类型函数有一个“非常具体的协议”。我建议阅读：Callable Cloud Functions 与 HTTP 函数相比如何？ 如果您想从应用程序调用 HTTP 函数，则只需使用常规 HTTP 客户端，例如

浏览器的 fetch API

或 XMLHTTPRequest。 如果您想要使用可调用类型函数，则必须使用 onCall 而不是 onRequest 来以不同方式定义云函数，如

文档

中所述。