火力储存库的奇怪行为

Question

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

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

在上传图像期间，我将原始文件和缩小后的文件的下载网址和存储参考都保存在数据库中。

当我将下载url放在iron image元素中以在浏览器中显示图像时，一切都很正常，缩小的图像显示在屏幕上。当我试图通过XMLHttpRequest（）下载完整大小的图像时，我得到了Cors错误。我不明白为什么，两个请求都来自同一个应用程序，为什么两个不同的cors响应？

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无法加载******[image link]*****。请求的资源上不存在“Access Control Allow Origin”标头。起源'http://localhost:3000因此，不允许访问。

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

Answer 1

Firebase"部署配置"留档中关于标题的部分指出，要启用对映像的跨源请求，您必须在您的firebase.json中添加如下内容：

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

当我将下载url放在iron image元素中以在浏览器中显示图像时，一切都很正常，…当我尝试通过XMLHttpRequest（）下载全尺寸图像时，我得到了Cors错误。我不明白为什么，两个请求都来自同一个应用程序，为什么两个不同的cors响应？

因为浏览器会阻止跨源XHR请求，除非接收请求的服务器使用CORS来允许它们，通过访问控制允许源：头进行响应。

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

这是意料之中的。当您将一个网址放入浏览器的地址栏时，它不是一个跨源请求——相反，它只是您直接导航到一个网址。

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

因此，浏览器默认会阻止Web应用中运行的JavaScript发出的此类跨源请求。但是要选择接收这样的请求，站点可以在其对浏览器的响应中包含Access-Control-允许-起源：*标头。如果浏览器看到该标头，它不会阻止请求。

有关更多详细信息，请参阅MDN的HTTP权限改造（CORS）一文。

Answer 2

我终于按照要求找到了一些关于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 setcors.jsongs：//

这些步骤对我有用！

这里也回答了这个问题：Firebase存储和访问控制允许起源，这是我在回答后发现的。