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标头，然后将其发送到运行您的前端的浏览器。 / p>

您可以使用使用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

错误消息的关键部分是：

仅协议方案支持跨源请求

和

在以下位置访问XMLHttpRequest 来源“ http://localhost:3000”中的“ gs：//******.appspot.com/****/****”

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

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

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

从Firebase检索数据时发生错误

2 个答案: