Utilisation de JSZip à partir du site Web pour télécharger le fichier à partir d'Azure Blob Storage

Question

Je stocke du contenu vidéo dans Azure Blob Storage. Lorsque l'utilisateur clique sur un bouton dans le site Web, je veux compresser ce fichier vidéo et faire en sorte que les utilisateurs le téléchargent. L'URL que je donne en entrée est le fichier blob direct url to azure, par exemple: https://xxxxx.blob.core.windows.net/user-content/yyyy.mp4. Quand je lance le code ci-dessous je reçois l'erreur:

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)

Quand j'accéder url blob directement dans le navigateur, je suis en mesure de télécharger le fichier. J'ai même activé CORS sur le blob azur pour autoriser les requêtes de n'importe quelle origine et tous les en-têtes encore je reçois l'erreur. Comment résoudre ceci? Ou existe-t-il un autre moyen de faire la même fonctionnalité?

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

Selon votre description, je suggère que vous pourriez revérifier que vous avez déjà activé le réglage de blob de stockage d'azur de CORS pas à la table/fichier.

Si vous avez déjà défini le blob CORS, je suggère que vous puissiez essayer de le supprimer et de le réinitialiser à nouveau.

image comme ceci:

Mon Cadre:

J'ai aussi créé une démo de test selon vos codes, après avoir réglé le CORS, je pouvais télécharger le fichier.

Résultat: