firebase存储cors奇怪的行为

Question

我正在构建一个应用程序，用户看到一组缩小的图像，然后按“确定”让应用程序下载所有原始文件，将它们放入 zip 文件并发送 zip 文件。

该应用程序使用聚合物、聚合物火、火力（包括存储）。

在上传图像的过程中，我将原始文件和缩小后的文件的下载 url 和存储引用都保存在数据库中。

当我将下载 url 放在 Iron-image 元素中以在浏览器中显示图像时，一切正常，缩小后的图像显示在屏幕上。当我尝试通过 XMLHttpRequest() 下载全尺寸图像时，出现 Cors 错误。我不明白为什么，两个请求都来自同一个应用程序，为什么两个不同的 cors 响应？

这是 XMLHttpRequest() 的代码（主要从 firebase 文档中复制）：

for (var z = 0; z < visita.immagini.length; z++) {
  var immagine =visita.immagini[z]

  var storage = firebase.storage();
  var pathReference = storage.ref('immagini/'+ immagine.original.ref);
  pathReference.getDownloadURL().then(function(url) {

    var xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = function(event) {
      var blob = xhr.response;
      console.log(blob);
    };
    xhr.open('GET', url);
    xhr.send();
  }).catch(function(error) {
      console.log(error);
  });

}

这是错误响应：

XMLHttpRequest 无法加载 ***** [图片链接]*****。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问Origin ' http://localhost:3000 '。

请注意，如果我复制***** [image link]******并放入浏览器的另一个选项卡中，我可以毫无问题地看到。

Answer 1

我终于按照要求找到了一些关于 CORS + 存储的信息。在此处查看有关存储的 firebase 文档：https : //firebase.google.com/docs/storage/web/download-files#cors_configuration。

首先，您需要gsutil（https://cloud.google.com/storage/docs/gsutil_install）。

然后cors.json使用以下内容在项目中的某处创建一个名为的文件：

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

最后运行： gsutil cors set cors.json gs://<your-cloud-storage-bucket>

这些步骤对我有用！

这也在这里回答：Firebase Storage and Access-Control-Allow-Origin，我在回答后发现。

Answer 2

Firebase \xe2\x80\x9cDeployment Configuration\xe2\x80\x9d 文档中有关标头的部分表示，要启用图像的跨域请求，您必须添加firebase.json如下内容：

\n

"headers": [ {\n  "source" : "**/*.@(jpg|jpeg|gif|png)",\n  "headers" : [ {\n    "key" : "Access-Control-Allow-Origin",\n    "value" : "*"\n  } ]\n} ]\n

\n

\n

当我将下载网址放入iron-image元素中以在浏览器中显示\n图像时，一切正常，\xe2\x80\xa6 当我尝试\n通过 XMLHttpRequest() 下载全尺寸图像时，我收到 Cors\n错误。我不明白为什么，两个请求都来自同一个应用程序，为什么有两个不同的 cors 响应？

\n

\n

因为浏览器会阻止跨源 XHR 请求，除非接收请求的服务器使用 CORS 通过标头响应来允许它们Access-Control-Allow-Origin: *。

\n

\n

请注意，如果我复制***** [image link]******并放入浏览器的另一个\n选项卡中，我可以毫无问题地查看。

\n

\n

这是预期的\xe2\x80\x99。当您将 URL 放入浏览器\xe2\x80\x99s 地址栏中时，\xe2\x80\x99s 不是跨源请求\xe2\x80\x94，而是 \xe2\x80\x99s 只是您直接导航到 URL 。

\n

但是，当您将该 URL 放入在 Web 上某个源运行的 Web 应用程序的 JavaScript 中时，发送该请求时，您不是直接导航到该 URL，而是直接导航到该 URL，而是它\xe2\x80\ x99 的某些 Web 应用程序向另一个网站发出跨源请求。

\n

因此浏览器默认会阻止来自前端 JavaScript 代码的此类跨源请求。但要选择接收此类请求，站点可以Access-Control-Allow-Origin在对浏览器的响应中包含标头。如果浏览器看到该标头，它将\xe2\x80\x99t 阻止该请求。

\n

有关更多详细信息，请参阅MDN 上的HTTP 访问控制 (CORS)文章。

\n