No Access-Control-Allow-Origin

[shahoghaderi]

Hi, i use this mini app https://stuk.github.io/jszip/documentation/examples/downloader.html in my project and i'm trying to download some mp3 files as zip! my mp3s are uploaded on a host and i use download link. but when i click on download button I get this error :

Failed to load http://dl-link/music.mp3: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

Thanks for any solution

[turquoise-turtle]

The 'No Access-Control-Allow-Origin' is something to do with CORS (cross-origin resource sharing). See https://en.wikipedia.org/wiki/Same-origin_policy Basically that website which the audio files are uploaded on has a HTTP header which only lets other pages on that website request resources using XMLHttpRequest (which is what JSZipUtils.getBinaryContent is doing in the background). So because your computer – 'localhost' – is not on the same URL as the audio files you're using it will block the connection to those audio files.

So, it's not really a problem with JSZip, but a security thing of websites to protect their content from being scraped easily.

What you could do is see if your audio files can be served from the same place that your mp3 downloader will be hosted. Or you could look up CORS proxies – setting up your own would be much better while ones you find online might work they may not always be reliable. Personally I make chrome extensions because the CORS header blocking access to a project that you code in HTML/JS/etc is ignored – see https://developer.chrome.com/extensions/xhr

[shahoghaderi]

Hello again thanks for your reply @turquoise-turtle

this is my js code $(".downloadAll").on('click',function () { // find every song urls $(".album-dl-box").find("a").each(function () { var song = $(this); var url = song.attr('href'); var filename = url.replace(/.*\/|%20/g, "").replace(/%5d/g,"]").replace(/%5b/g,"["); JSZipUtils.getBinaryContent(url, function (err, data) { if(err) { throw err; // or handle the error } var zip = new JSZip(); zip.file(filename, data, {binary:true}); }); }); })

and html

`

• download

`

where is my mistake?

[turquoise-turtle]

There's no mistake in your code, the problem is that the website you're downloading the urls from is blocking it because because it realises your code isn't coming from the same server as where the songs are hosted. To bypass it look up CORS proxy heroku button, and then use that url + the song url

[jicihome]

Hi! I have a similar issue but this only happen on MacOS with Safari on Chrome (firefox work fine and PC too). So I think there's something we can set to fix that? In script on in CORS setting?

[ypirka]

Hi! I'm using your library to generate ZIP (files are populated from Url).... and a couple of day all was fine. But now for some reason, I receive the error that related to CORS. However, I know that CORS policy is set in my environment. And the most strange thing, that when I wanna debug via using Chrome debug console, I can create ZIP! Just a recap: sometimes Zip works, sometimes no

[mcfly3001]

Hi, I just came across the same error. I think the issue is, that if the data has already been loaded once, it will next try to use the cache which does not provide the CORS header. The issue is described in more detail here:

https://stackoverflow.com/questions/31732533/s3-cors-always-send-vary-origin

Maybe this helps.

[MaBbKhawaja]

Do we have any solution for this when working from frontend ??? Any of you resolve the issue ??