从 firebase angular-ionic 应用程序调用 http 云函数

Question

这可能是微不足道的，但我是 GCP 和应用程序开发的新手。

我有一个与 firebase 集成的 angular-ionic 应用程序（我能够读取和写入 firestore）现在我正在尝试调用 http 触发的云 python 函数。

在我的 firebase 控制台中，我可以看到该功能存在：

Request
https://europe-west6-tmaker-bd14b.cloudfunctions.net/generate_tournament8

我在我的应用程序中调用该函数（目前在本地运行）： generateTournament8(eventRefPath:string)，实现在以下文件中：

import { AngularFireFunctions } from '@angular/fire/functions';
import { AlertController } from '@ionic/angular';


@Injectable({
  providedIn: 'root'
})
export class CloudFunctionsService {


  constructor(private firestoreFunctions: AngularFireFunctions, private alertController: AlertController) { }



  generateTournament8(eventRefPath:string){
    const callable = this.firestoreFunctions.httpsCallable('generate_tournament8');
    var res = callable({'event_ref_path': eventRefPath });

    res.subscribe(async res => {
      const alert = await this.alertController.create({
        header: `Time: ${res.date}`,
        message: res.msg,
        buttons: ['OK']
      });
      await alert.present();
 });


  }

}

尝试调用该函数时，我在控制台中收到以下错误：

Access to fetch at 'https://us-central1-tmaker-bd14b.cloudfunctions.net/generate_tournament8' from origin 'http://localhost:8100' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

我想我错过了一些微不足道的东西。像不正确的权限。你能帮帮我吗？

Answer 1

您没有分享您的 Cloud Function 的代码，但您似乎混淆了 HTTPS Cloud Functions 和 callable Cloud Functions。

一方面，根据您的问题标题和函数 URL，以及无法从 Google Cloud Console（用于 Python Cloud Functions）创建 Callable Cloud Function 的事实，您的云函数似乎是一个 HTTPS 云函数。

另一方面，在您的前端代码 (this.firestoreFunctions.httpsCallable()) 中，您实际上定义了一个可调用的云函数。

---

您应该像“标准”REST API 端点一样调用您的 HTTPS 云函数，可以使用 fetch、axios 或任何其他 ionic/angular 类似库。

---

请注意，虽然 Callable Cloud Functions 通常通过 Firebase CLI 部署，但也可以从 Google Cloud Console 创建和部署 Callable Cloud Functions，但您需要遵循 specification for the HTTPS request and response。

Answer 2

在您报告时，您的函数可在以下位置获得：

Request
https://europe-west6-tmaker-bd14b.cloudfunctions.net/generate_tournament8

因此，您似乎选择了 europe-west6 作为云功能的区域。

为了正确配置@angular/fire，您需要在根模块中设置REGION 令牌：

// src/app/app.module.ts

import { NgModule } from '@angular/core';
import { AngularFireModule } from '@angular/fire';
import { AngularFireFunctionsModule, REGION } from '@angular/fire/functions';

import { environment } from '../environments/environment';

@NgModule({
  imports: [
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireFunctionsModule,
  ],
  providers: [
    { provide: REGION, useValue: 'europe-west6' },
  ]
})
export class AppModule {
}

见：https://github.com/angular/angularfire/blob/master/docs/functions/functions.md#functions-region