Verwenden von JSZip von der Website zum Herunterladen von Dateien aus Azure Blob Speicher

Question

Ich speichere einige Videoinhalte im azure Blobspeicher. Wenn ein Benutzer auf eine Schaltfläche in der Website klickt, möchte ich diese Videodatei komprimieren und die Benutzer herunterladen. Die URL, die ich als Eingabe gebe, ist die direkte URL zur azure Blob-Datei zB: https://xxxxx.blob.core.windows.net/user-content/yyyy.mp4. Wenn ich den folgenden Code ausführen ich die Störung erhalte:

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)

Wenn ich Blob-URL in Browser direkt zugreifen Ich bin in der Lage, die Datei herunterzuladen. Ich habe sogar CORS auf dem azurblauen Blob aktiviert, um Anfragen von jedem Ursprung und allen Headern zu erlauben, immer noch bekomme ich den Fehler. Wie löst man das? Oder gibt es eine andere Möglichkeit, die gleiche Funktionalität zu nutzen?

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

Nach Ihrer Beschreibung, schlage ich vor, Sie CORS die Azure-Speicher Blobs aktiviert haben bereits nachprüfen konnte nicht Tabelle/Datei einstellen.

Wenn Sie bereits den Blob CORS gesetzt haben, schlage ich vor, Sie könnten versuchen, es zu löschen und es erneut zu setzen.

Bild wie folgt aus:

Mein Rahmen:

Ich habe auch einen Test Demo nach Ihren Codes erstellt, nachdem die CORS Einstellung, ich herunterladen konnte Datei.

Ergebnis: