Using JSZip from website to download file from Azure Blob Storage

Question

I am storing some video content in azure blob storage. When user clicks a button in the website, i want to zip that video file and make the users download it. The URL i give as input is the direct url to azure blob file eg : https://xxxxx.blob.core.windows.net/user-content/yyyy.mp4 . When I run the below code I am getting the error :

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)

When I access blob url directly in browser I am able to download the file. I have even enabled CORS on the azure blob to allow requests from any origin and all headers still I am getting the error. How to solve this ? Or is there any other way to do the same functionality?

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

It seems you have not configured the CORS settings for Blob Service. Please configure that first. You may find this helpful: stackoverflow.com/questions/28894466/…. — Gaurav Mantri
Hi.. I have configured CORS in the azure blob storage to allow requests from all origins... Screenshot reference : link — Rangarajan K

Brando Zhang Brando Zhang · Accepted Answer · 2017-06-28T02:54:31

According to your description, I suggest you could recheck you have already enabled the azure storage blob's CORS setting not table/file.

If you have already set the blob CORS, I suggest you could try to delete it and reset it again.

Image like this:

My Setting:

I have also created a test demo according to your codes, after setting the CORS, I could download the file.

Result:

Using JSZip from website to download file from Azure Blob Storage

1 Answers