firebase 存储 cors 奇怪的行为

Posted

技术标签:

【中文标题】firebase 存储 cors 奇怪的行为【英文标题】:firebase storage cors strange Behaviour 【发布时间】:2017-06-21 17:05:46 【问题描述】:

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

该应用正在使用 polymer、polymerfire、firebase(包括存储)。

在上传图片的过程中,我将原始文件和缩小文件的下载 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”标头 资源。因此不允许使用原点“http://localhost:3000” 访问。

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

【问题讨论】:

【参考方案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://&lt;your-cloud-storage-bucket&gt;

这些步骤对我有用!

这里也有回答:Firebase Storage and Access-Control-Allow-Origin,是我回答后发现的。

【讨论】:

为我工作。谢谢! @Andrew McOlash 你救了我 应该是公认的解决方案。谢谢! 这种方法突然对我们不起作用了。我尝试将原点更改为 "*" 以外的其他内容,但无论我们尝试多少次,无论我们等待多久看到它反映,都不会应用更改。【参考方案2】:

headers in the Firebase “Deployment Configuration” docs 上的部分说要启用图像的跨域请求,您必须在您的 firebase.json 中添加如下内容:

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

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

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

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

这是意料之中的。当您将 URL 放入浏览器的地址栏中时,这不是跨域请求,而是您直接导航到 URL。

但是,当您将该 URL 放入 Web 应用程序的 javascript 时,该 Web 应用程序在 Web 上的某个来源运行,那么当发送该请求时,您不是直接导航到该 URL,而是某个 Web 应用程序进行了跨域请求到另一个网站。

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

有关详细信息,请参阅 MDN 上的 HTTP access control (CORS) 文章。

【讨论】:

以上是关于firebase 存储 cors 奇怪的行为的主要内容,如果未能解决你的问题,请参考以下文章

SignalR 2.0 CORS Chrome 禁用 Web 安全奇怪行为

Laravel 5 / Nginx - 在 Web 服务器级别设置的 CORS 标头的奇怪行为

Firebase 查询结果 SWIFT 的奇怪行为

在 iOS 上接收来自 firebase 的通知的奇怪行为

Firebase/React/Redux 组件有奇怪的更新行为,状态应该没问题

Firebase 存储下载突然停止工作 - 可能是 cors 问题?