我是Angular和Firebase的新手，我发现了一个与CORS有关的奇怪行为，试图从我的Angular应用程序中定义的服务中调用Firebase云函数。
基本上我有这个组件类：
import { Component, OnInit } from '@angular/core';
import {PickListModule} from 'primeng/picklist';
import { PeopleService } from 'src/app/service/PeopleService';
@Component({
selector: 'app-user-manager',
templateUrl: './user-manager.component.html',
styleUrls: ['./user-manager.component.scss']
})
export class UserManagerComponent implements OnInit {
//sourceProducts: any[];
//targetProducts: any[];
sourceUsers: any[];
targetUsers: any[];
constructor(private peopleService: PeopleService) { }
ngOnInit() {
//this.sourceProducts = ["USER-1", "USER-2", "USER-3"];
//this.targetProducts = [];
let users: any[];
this.peopleService.getAllUsersFromFirebaseAuth().subscribe(
data => {
users = data;
console.log("USERS LIST RETRIEVED FROM Angular Fire Auth: ", users);
this.sourceUsers = users;
}
);
this.sourceUsers = []
this.targetUsers = []
}
}
正如您在ngOnInit()方法中看到的，它订阅了我的服务类的getAllUsersFromFirebaseAuth()方法。
该方法的代码为：
getAllUsersFromFirebaseAuth(): Observable<any[]> {
return this.http.get<any> ('https://MY-FIREBASE-PROJECT.cloudfunctions.net/getAllUsersOnFirebaseAuthentication');
}
它调用了定义到这个Cloude存储函数中的API：
export const getAllUsersOnFirebaseAuthentication = functions.https.onRequest((req, res) => {
admin.initializeApp();
const auth = admin.auth();
const maxResults = 10; // optional arg.
let usersList: any = [];
let usersListJsonObj: any = {};
auth.listUsers(maxResults).then((userRecords) => {
userRecords.users.forEach((user) => {
console.log(user.toJSON());
usersList.push(user.toJSON());
});
usersListJsonObj["users_list"] = usersList;
res.set('Access-Control-Allow-Origin', '*');
res.status(200).json(usersListJsonObj);
}).catch((error) => console.log(error));
});
正如你在这个函数中看到的，理论上，我通过以下方式启用了CORS访问：
res.set('Access-Control-Allow-Origin', '*');
但现在，当我的服务执行调用时，发生了一些奇怪的事情。
如果我处于调试模式，并且我在服务箭头函数订阅中设置了一个断点，那么：
this.peopleService.getAllUsersFromFirebaseAuth().subscribe(
data => {
users = data;
console.log("USERS LIST RETRIEVED FROM Angular Fire Auth: ", users);
this.sourceUsers = users;
}
);
数据似乎检索正确，事实上this.sourceUsers列表包含一个由2个对象组成的数组(正如预期的那样(。
但是在Chrome控制台中执行它时没有调试模式(只是访问页面(，我获得了以下似乎与CORS相关的错误消息：
- 访问'XMLHttpRequesthttps://MY-PROJECT-NAME/getAllUsersOnFirebaseAuthentication'来自原点'http://localhost:4200'已被CORS策略阻止：请求的资源上不存在"Access Control Allow Origin"标头。us-central1-color-patch.cloudfunctions.net/getAllUsersOnFirebaseAuthentication:1
- 加载资源失败：net:：ERR_Failedvendor.js:22822
- 错误HttpErrorResponsedefaultErrorLogger@vendor.js:28282
在调试模式下，在订阅中设置一个断点，我如何可以从Firebase Cloud Function API获取数据，在控制台中打印输出，但我在不使用调试器的情况下访问同一页面时会获得此错误？
怎么了？我错过了什么？我该如何解决这个问题？
问题似乎在getAllUsersOnFirebaseAuthentication云函数代码中。
export const getAllUsersOnFirebaseAuthentication = functions.https.onRequest((req, res) => {
admin.initializeApp();
const auth = admin.auth();
const maxResults = 10; // optional arg.
let usersList: any = [];
let usersListJsonObj: any = {};
auth.listUsers(maxResults).then((userRecords) => {
userRecords.users.forEach((user) => {
console.log(user.toJSON());
usersList.push(user.toJSON());
});
usersListJsonObj["users_list"] = usersList;
res.set('Access-Control-Allow-Origin', '*');
res.status(200).json(usersListJsonObj);
}).catch((error) => console.log(error));
});
我建议通过将admin.initializeApp();移动到云函数体之外来全局运行它。
；一段时间前在堆栈上：
带有axios请求的火球云函数CORS错误
我用异步调用做了一个棱角分明的应用程序。在看到需要头和方法后，我通过angularfire/cloud函数解决了我的cors错误。希望这能有所帮助。
Index.js
````
const cors = require('cors');
exports.YourPropertyInputHere = functions.https.onRequest(async (req,
res) => {
res.set('Access-Control-Allow-Origin', '*')
res.set('Access-Control-Allow-Methods', 'GET,POST,OPTIONS,DELETE,PUT')
res.set('Access-Control-Allow-Headers', 'Content-Type')