从 Firebase 检索数据时发生错误答案

【问题标题】：Error occurs when retriving data from Firebase从 Firebase 检索数据时发生错误
【发布时间】：2019-02-15 11:19:30
【问题描述】：

您好，我将 mp3 文件存储在 Firebase 的 Storage 中。将规则选项卡下的权限设置为：

      allow read, write, request;

为了从那里获取文件，我使用 react-axios。

当我加载我的页面时，我收到一条请求已被 CORD 策略阻止的错误：

Access to XMLHttpRequest at 
'gs://******.appspot.com/****/****' from origin 'http://localhost:3000' 
has been blocked by CORS policy: Cross origin requests are only 
supported for protocol schemes: http, data, chrome, chrome-extension, 
https.

我安装了 gsutil，然后运行了命令：

gsutil cors set cors.json gs://****.appspot.com

我在运行此命令时没有收到任何错误。

这是 cors.json 文件：

[ 
 {
  "origin": ["http://localhost:3000","gs://******.appspot.com"],
  "method": ["GET"],
  "maxAgeSeconds": 3600
 }
]

但是，当我加载我的网站时，我仍然收到同样的错误...

【问题讨论】：

规则看起来不太好。参考官方文档正确设置：firebase.google.com/docs/storage/security/start#sample-rules
目前我不关心身份验证，所以它们很好
也许你不在乎，但规则的语法不正确。如果您确定身份验证不会阻止上传/下载，则使用文件引用的.getDownloadURL() 方法获取用于检索文件的有效 URL（它将具有 https: 协议，而不是 gs:)。
详情：firebase.google.com/docs/storage/web/…

标签： javascript reactjs firebase axios

【解决方案1】：

由于错误消息指出，只有某些协议才允许跨源请求。这是在大多数浏览器中实施的安全措施。如果你对为什么这个政策感兴趣，codecademy 上有一篇关于这个的好文章。

对于这个问题，我建议的解决方案是在该主机上设置一个后端 api 服务器，让它从数据库中查询所需的信息，添加必要的 CORS 标头，并将其发送到运行前端的浏览器。

您可以使用 node.js 和 express.js 来做到这一点。请看下面的例子。

const cors = require('cors');
const express = require('express');
const app = express();

function getmusicfunction(req, res) {
  console.log('GET /getmusic');
  # query the db for your file here and store it into your body bariable
  res.send(body);
}

const corsOptions = {
  origin: '*',
  optionsSuccessStatus: 200,
};

app.use(cors(corsOptions));
app.get('/getmusic', (req, res) => getmusicfunction(req, res));

const port = 6667;
app.listen(port, () => console.log('API listening on port ' + port + '!'));

编辑：我将 Firebase 与 Firebird 混淆了。对不起。我撤回了那个答案。

【讨论】：

【解决方案2】：

错误信息的关键部分是：

仅协议方案支持跨源请求

和

访问 XMLHttpRequest 在 'gs://******.appspot.com/****/****' 来自原点'http://localhost:3000'

您正试图通过在http:// 上运行的 JavaScript 访问以 gs:// 开头的 URL。这是两种不同的协议，错误消息说这是不允许的。

要从您通常使用的 Cloud Storage 下载文件：

您为文件生成的下载 URL，它是公开可读（但不可猜测）的 URL。下载 URL 以 https:// 开头，因此可以从您的页面获得跨原始请求。请参阅 downloading a file via a URL 上的 Firebase 文档。
~~或者您使用 Firebase SDK 访问数据。 Firebase SDK 使用自己的协议，不受跨域要求的影响。您可以使用您现在与该 SDK 一起使用的 gs: URL。~~ 看起来这种方法在 JavaScript SDK 中不可用。

【讨论】：