Javascript firebase存储cors的奇怪行为

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

该应用程序使用聚合物、polymerfire、firebase（包括存储）

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

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

以下是XMLHttpRequest（）的代码（主要来自firebase文档）：

for（var z=0；z

上的部分指出，要启用图像的跨源请求，必须向

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放入浏览器的地址栏时，它不是跨源请求，而是您直接导航到URL

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

因此，浏览器默认情况下会阻止来自Web应用程序中运行的JavaScript的此类跨源请求。但要选择接收此类请求，站点可以在其对浏览器的响应中包含

访问控制允许来源：

标题。如果浏览器看到该标题，则不会阻止请求

---

有关更多详细信息，请参阅MDN上的文章。

我终于找到了有关CORS+存储的一些信息。请在此处查看存储上的firebase文档：

首先，您需要

gsutil

（）

然后在项目中的某处创建一个名为

cors.json

的文件，其中包含以下内容：

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

最后运行：

gsutil cors set cors.json gs://

这些步骤对我有用

---

这里也有答案：，这是我在回答后发现的。

对我有用。谢谢@Andrew McOlash你救了我这应该是可以接受的解决方案。谢谢这种方法突然对我们不起作用了。我曾尝试将原点更改为

“*”

以外的其他内容，但无论我们尝试了多少次，也不管我们等待多久才能看到它的反映，更改都从未应用。