如何在 vue 项目中获取 firebase 实时数据库 API 时处理 CORS 错误？答案

【问题标题】：How to handle CORS error, while fetching firebase realtime database API in vue project?如何在 vue 项目中获取 firebase 实时数据库 API 时处理 CORS 错误？
【发布时间】：2021-01-08 23:49:57
【问题描述】：

我正在使用 vue-2。并且想通过获取 API 对 firebase 实时数据库进行浅层查询。但是在开发服务器上运行时，它显示 CORS 被阻止。我该怎么办？ PS：我也在用vuefire

created(){
    var apiUrl = 'https://console.firebase.google.com/u/4/project/enajori-45094/database/enajori-45094/data/Admin/Data%20Collection/Paying%20Guest';
    fetch(apiUrl).then(response => {
      return response.json();
    }).then(data => {
      console.log(data);
    }).catch(err => {
        console.log(err);
    });
}

Cors error i am receiving

【问题讨论】：

在 Stack Overflow 上，不要显示代码和文本的图片。将文本复制到问题中并设置格式，以便于阅读、复制和搜索。

标签： javascript api vue.js firebase-realtime-database cors

【解决方案1】：

Firebase REST-Api 仅对 HTTPS-Requests 作出反应。如果您的本地主机没有启用 SSL，无论您尝试什么，您的请求都将失败。 URI 也需要以表名结尾，如something.json

而且您确实应该使用 Firebase SDK - 这是一种更顺畅的方式。

【讨论】：

谢谢，我不知道 .json 部分

【解决方案2】：

我完全不清楚您为什么要使用 Firebase 控制台 的 URL 来访问数据库。控制台 URL 是供人使用的，而不是供程序使用的。

您应该使用提供的 JavaScript SDK 来访问数据。它将自动为您解决 CORS 问题，并为您提供一种更简洁的方式来读取和写入数据。如果您不能使用 SDK，您可以随时尝试REST API。根本不要依赖那些控制台 URL。

【讨论】：

感谢您的回答。你永远是拯救的人。无论如何，我想要它来做一个浅层查询，我解决了这个问题。 url 有问题，也错误地没有将 .json 附加到 url 的末尾