在本地主机上开发时如何使用 AngularFire 函数允许 CORS

Question

我在 Ionic/angular 应用程序中使用 AngularFire。

我正在尝试调用函数：

const getDiretions = this.functions.httpsCallable('getDirections');
    const result = await getDiretions({
      lat1: lastStop.coordinates.latitude,
      lng1: lastStop.coordinates.longitude,
      lat2: step.coordinates.latitude,
      lng2: step.coordinates.longitude,
    }).toPromise();

但我明白了：

Access to fetch at 'https://europe-west6-xxxxxx-yyyyyy.cloudfunctions.net/getDirections' from origin 'http://localhost:8100' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

使此请求从本地主机成功的正确方法是什么？

编辑抱歉，这是我如何初始化 this.functions:

  constructor(private functions: AngularFireFunctions) {}

编辑 2

后端定义如下：

import * as functions from 'firebase-functions';
import * as admin from 'firebase-admin';

admin.initializeApp();


export const getDirections = functions.region('europe-west6').https.onRequest((request, response) => {
  const lat1: number = +(request.query.lat1 ?? '0');
  const lng1: number = +(request.query.lng1 ?? '0');
  const lat2: number = +(request.query.lat2 ?? '0');
  const lng2: number = +(request.query.lng2 ?? '0');


  //Do something with lat/lng


  response.status(200);
  response.send(answer);
});

Answer 1

你其实是在混HTTP Cloud Functions and Callable Cloud Functions.

您的 Cloud Function 代码对应于一个 HTTP 代码 (functions.region('europe-west6').https.onRequest(...))，但是您前端中的代码调用了一个 Callable 代码 (this.functions.httpsCallable('getDirections');)。

您应该采用其中一种，最有可能将您的 Cloud Function 调整为 Callable 函数（以获得 Callable 的优势），如下所示：

export const getDirections = functions.region('europe-west6').onCall((data, context) => {
  const lat1: number = +(data.lat1 ?? '0');
  const lng1: number = +(data.lng1 ?? '0');
  // ...

  //Do something with lat/lng

  return {
    answer: answer,
  };
});

在本地主机上开发时如何使用 AngularFire 函数允许 CORS

How to allow CORS with AngularFire Functions when developing on localhost

angular

firebase

google-cloud-functions

cors

angularfire