我正在构建一个应用程序,用户看到一组缩小的图像,然后按“确定”让应用程序下载所有原始文件,将它们放入一个 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 cannot load ***** [image link]******. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
请注意,如果我复制
***** [image link]******
并放入浏览器的另一个选项卡中,我可以毫无问题地看到。
最佳答案
我终于按照要求找到了有关 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 ,我回答后发现的。
关于javascript - firebase 存储 cors 奇怪的行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42039282/