如何从客户端获取firebase存储json文件答案

【问题标题】：how to fetch firebase storage json file from client side如何从客户端获取firebase存储json文件
【发布时间】：2021-03-06 11:28:19
【问题描述】：

我在google云存储中保存了一个json文件，我想获取文件，读取json内容并将内容保存到客户端indexeddb。

loadJSON(function(json) {
   console.log(json); // this will log out the json object
 });

var fileUrl ="https://firebasestorage.googleapis.com/v0/b/rwrwr-rwr.appspot.com/o/TestCatalog.json?alt=media&token=r545-54-54-54-45455"


function loadJSON() {

  var request = new Request(fileUrl);

  fetch(request, {mode: 'cors'}).then(function(response) {
    // Convert to JSON
    return response.json();
   }).then(function(j) {
  // Yay, `j` is a JavaScript object
   console.log(JSON.stringify(j));
  }).catch(function(error) {
   console.log('Request failed', error)
  });
  }

提取产生此错误

CORS 策略已阻止来自原点“null”：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

如何获取 firebase 存储 json 文件？

【问题讨论】：

标签： javascript firebase firebase-storage

【解决方案1】：

如果您从浏览器运行此代码，则必须在您的 Cloud Storage 存储分区上启用跨域访问。
为此，您可以使用 gsutil 工具并运行

gsutil cors set cors.json gs://<your-cloud-storage-bucket>

cors.json 文件应包含以下内容：

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

您可以在 here 上找到文档。

【讨论】：

您确定这会影响 Firebase Storage SDK 生成的下载 URL 吗？这就是这里使用的。
我认为这不会影响下载 URL。据我了解，该错误表明需要将资源（在这种情况下为存储桶）配置为向“Access-Control-Allow-Origin”标头字段提供响应。这应该是标准的 cors 行为：developer.mozilla.org/en-US/docs/Web/HTTP/CORS
请注意，添加到 URL 的令牌绕过所有安全规则。目前我还没有找到一种方法，无论是否使用 CORS，来访问实际上遵循安全规则的 Firebase 存储文件。