Firebase存储Cors奇怪的行为 [英] firebase storage cors strange Behaviour

问题描述

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

I'm building an app in witch the user see a set of downsized images and than press " ok" for the app to download all of the original files, put them into a zip file and send the zip file.

应用正在使用聚合物，polymerfire，firebase（包括存储）。

the app is using polymer, polymerfire, firebase (including the storage).

在上传图片时将原始文件和缩小后的文件的下载URL和存储参考都保存在数据库中。

during the upload of the images i save in the database both the download url and the storage reference for both the original file and the downsized one.

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

when i put the download url in the iron-image element to show the images in the browser everything works perfectly, the downsized images are shown on the screen. When i try to download the fullsize images via XMLHttpRequest() i get the Cors error. I can't understand why, both request are coming from the same app, why two different cors response?

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

here is the code for the XMLHttpRequest() (mostly copied from the firebase documentation):

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] ******。所请求的
资源上没有
访问控制允许来源标头。因此，不允许
访问源 http：// localhost：3000 。

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

note that if i copy the ***** [image link]****** and put in another tab of the browser i can see without problems.

推荐答案

Firebase部署配置文档中的标题表示要启用图像的跨域请求，您可以必须将这样的内容添加到您的 firebase.json 中：

The section on headers in the Firebase "Deployment Configuration" documentation indicates that to enable cross-origin requests for images, you must add to your firebase.json something like this:

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

$当我将下载网址放在iron-image元素中以在浏览器中显示
图像时，b
$ b

r一切正常，…当我尝试
通过XMLHttpRequest（）下载完整尺寸的图像时，出现Cors
错误。我不明白为什么，两个请求都来自同一个
应用程序，为什么两个不同的cors响应？

when i put the download url in the iron-image element to show the images in the browser everything works perfectly, … When i try to download the fullsize images via XMLHttpRequest() i get the Cors error. I can't understand why, both request are coming from the same app, why two different cors response?

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

Because browsers block cross-origin XHR requests unless the server receiving the requests uses CORS to allow them, by responding with an Access-Control-Allow-Origin: * header.

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

note that if i copy the ***** [image link]****** and put in another tab of the browser i can see without problems.

这是预期的。当您将URL放入浏览器的地址栏中时，它不是跨域请求，而是直接导航至URL。

That’s expected. When you put a URL into your browser’s address bar, it’s not a cross-origin request—instead it’s just you navigating directly to a URL.

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

But when you put that URL into the JavaScript for a Web application running at some origin on the Web, then when that request is sent, it’s not you navigating directly to the URL but instead it’s some Web application making a cross-origin request to another Web site.

因此，默认情况下，浏览器会阻止Web应用程序中运行的JavaScript产生此类跨源请求。但是要选择接收这样的请求，站点可以在对浏览器的响应中包含 Access-Control-Allow-Origin：* 标头。如果浏览器看到该标头，则不会阻止该请求。

So browsers by default block such cross-origin requests from JavaScript running in Web apps. But to opt-in to receiving such requests, a site can include the Access-Control-Allow-Origin: * header in its response to the browser. If the browser sees that header, it won’t block the request.

有关更多详细信息，请参见 HTTP访问控制（CORS）在MDN上的文章。

For more details, see the HTTP access control (CORS) article at MDN.

这篇关于Firebase存储Cors奇怪的行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！