从Firebase检索数据时发生错误

Question

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

      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
 }
]

但是，当我加载网站时，仍然出现相同的错误...

Answer 1

由于错误消息状态仅针对某些协议才允许跨源请求。 这是在大多数浏览器中实施的安全措施。 如果您对为什么这种策略感兴趣的话很感兴趣，那么在codecademy上有一篇很好的文章。

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

您可以通过使用express.js使用node.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混淆了。 抱歉。 我撤回了那个答案。

Answer 2

错误消息的关键部分是：

跨源请求仅支持协议方案

和

从来源' http：// localhost：3000 '访问位于'gs：//******.appspot.com/****/****'的XMLHttpRequest

您正在尝试从运行在http://上的JavaScript访问以gs://开头的URL。 这是两种不同的协议，并且错误消息表明不允许这样做。

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

• 或者是您为文件生成的下载URL，它是公共可读（但不可猜测）的URL。 下载URL以https://开头，因此符合您页面的跨原始请求。 有关通过URL下载文件的信息，请参阅Firebase文档。
• 或者您使用Firebase SDK来访问数据。 Firebase SDK使用自己的协议，不受跨域要求的影响。 您可以使用该SDK现在使用的 gs: URL。 看起来这种方法在JavaScript SDK中不可用。