关于xmlhttprequest：从网站使用JSZip从Azure Blob存储下载文件


Using JSZip from website to download file from Azure Blob Storage

我将一些视频内容存储在天蓝色的blob存储中。 当用户单击网站上的按钮时，我想压缩该视频文件并让用户下载它。
我输入的URL是azure blob文件的直接URL，例如：https://xxxxx.blob.core.windows.net/user-content/yyyy.mp4。
当我运行以下代码时，出现错误：

XMLHttpRequest cannot load https://xxxxx.blob.core.windows.net/user-content/yyyy.mp4. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://xxx.yyy.io' is therefore not allowed access.

page-project.js:2810 Uncaught Error: InvalidStateError: Failed to read the 'responseText' property from 'XMLHttpRequest': The value is only accessible if the object's 'responseType' is '' or 'text' (was 'arraybuffer'). at XMLHttpRequest.xhr.onreadystatechange (jszip-utils.js:93)

当我直接在浏览器中访问blob url时，我可以下载文件。 我什至在天蓝色Blob上启用了CORS，以允许来自任何来源的请求，并且所有标头仍然出现错误。 如何解决呢？ 还是有其他方法可以实现相同功能？

JS代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function download(url){
var zip = new JSZip();
var zipFilename ="downloadvideo.zip";


JSZipUtils.getBinaryContent(url, function (err, data) {
     if(err) {
        throw err; // or handle the error
     }
     try {
        JSZip.loadAsync(data).then(function () {
            zip.file(url, data, {binary:true});
            zip.generateAsync({type:'blob'}).then(function(content) {
                saveAs(content, zipFilename);
            });
        });  
    }
    catch(e) {
        showError(e);
    }
    });
}
相关讨论

根据您的描述，我建议您可以重新检查是否已经启用了Azure存储Blob的CORS设置而不是表/文件。

如果您已经设置了Blob CORS，建议您尝试删除它并再次重置。

像这样的图像：

enter image description here

我的设定：

enter image description here

我还根据您的代码创建了一个测试演示，设置了CORS之后，我可以下载文件了。

结果：

enter image description here