GET request Firestore with Ionic + Angular：跨域请求被阻止并返回空数组

如何解决GET request Firestore with Ionic + Angular：跨域请求被阻止并返回空数组

我正在学习如何在 Ionic + Angular 项目中使用 Firebase 函数。

我想创建我的自定义函数，该函数将获取所有游戏（一个集合）并按照名为“count”的属性的顺序返回包含这些游戏的数组。我的第一步是获取所有游戏并显示以了解结构。

我在用 CORS 函数封装的 index.ts 中创建了我的函数，并通过设置标题，如许多教程所示：

export const getMostPlayedGames = functions.https.onRequest((req,res) => {
    cors(req,res,() => {
        const arrayOfGames: Game[] = []

        admin.firestore().collection('games').get().then((querySnapshot) => {
            querySnapshot.forEach((doc) => {
                arrayOfGames.push(doc.data() as Game)
            })
        }).catch((err) => {
            console.log(err)
            res.send({text: err})
        })

        res.send({json: arrayOfGames}).set('Access-Control-Allow-Origin','*')
    })
})

这是我使用函数的 module.ts：

    private async callTopGames() {
        this.http
            .get('http://localhost:5001/gamebridge-app/us-central1/getMostPlayedGames',{responseType: 'json',headers: {'Access-Control-Allow-Origin': '*'}})
            .subscribe((data: any) => {
                // console.log(data)
                this.topGames = data.json
            })
    }

调用是通过 ionViewWillEnter 完成的：

  async ionViewWillEnter() {
      await this.callTopGames()
  }

当我尝试访问该页面时，我的控制台中有两个错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5001/gamebridge-app/us-central1/getMostPlayedGames. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

和

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5001/gamebridge-app/us-central1/getMostPlayedGames. (Reason: CORS request did not succeed).

在我的 IntelliJ 控制台中，Promise 仍然“待处理”：

>  Promise { <pending> }
>  []
>  {"structuredData":true,"severity":"INFO","message":"Get all games"}
i  functions: Finished "getMostPlayedGames" in ~1s

我尝试了很多可能性，但没有解决方案...