在本地主机上开发时如何使用 AngularFire 函数允许 CORS
How to allow CORS with AngularFire Functions when developing on localhost
我在 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);
});
你其实是在混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,
};
});
我在 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);
});
你其实是在混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,
};
});