ウェブサイトからJSZipを使用してAzure Blobストレージからファイルをダウンロードする

Question

私は紺碧のBLOBストレージにいくつかのビデオコンテンツを保存しています。ユーザーがウェブサイトのボタンをクリックすると、そのビデオファイルを圧縮してユーザーにダウンロードさせたいと思う。 私が入力として与えるURLは、紺碧のblobファイルへの直接URLです（例：https://xxxxx.blob.core.windows.net/user-content/yyyy.mp4）。私は以下のコードを実行すると 私はエラーを取得しています：私は、ブラウザで直接ブロブのURLにアクセスすると

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上のCORSを有効にして、原点からのリクエストとすべてのヘッダーを依頼してもエラーが発生するようにしています。これを解決するには？または、同じ機能を実行する他の方法はありますか？

JSコード：

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ストレージブロブのCORSを有効にしています。

すでにBLOB CORSを設定している場合は、削除してもう一度リセットすることをお勧めします。このような

画像：

マイセッティング：私はまた、あなたのコードに応じてテストのデモを作成している

、CORSを設定した後、私がダウンロードできますファイル。

結果：