使用网站上的JSZip从Azure Blob Storage下载文件

Question

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

  

XMLHttpRequest无法加载https://xxxxx.blob.core.windows.net/user-content/yyyy.mp4。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许原点“http://xxx.yyy.io”访问。

     

page-project.js：2810未捕获错误：InvalidStateError：无法从'XMLHttpRequest'读取'responseText'属性：只有当对象的'responseType'为''或'text'时才能访问该值（是'arraybuffer' “）。在XMLHttpRequest.xhr.onreadystatechange（jszip-utils.js：93）

当我直接在浏览器中访问blob url时，我可以下载该文件。我甚至在azure blob上启用了CORS以允许来自任何来源和所有标头的请求仍然是我收到错误。怎么解决这个？或者还有其他方法可以执行相同的功能吗？

JS CODE：

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);
    }
    });
}

Answer 1

根据您的描述，我建议您可以重新检查您是否已启用azure storage blob的CORS设置而非表/文件。

如果你已经设置了blob CORS，我建议你可以尝试删除它并重新重置。

像这样的图像：

我的设置：

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

结果：