Download file from server Angular 2

Question

I have a code to convert image to dataUrl

  convertToDataURLviaCanvas(url, outputFormat){
return new Promise((resolve, reject) => {
  const img = new Image();
  img.crossOrigin = 'anonymous';
  img.onload = () => {
    let canvas = <HTMLCanvasElement> document.createElement('CANVAS'),
      ctx = canvas.getContext('2d'),
      dataURL;
    canvas.height = img.height;
    canvas.width = img.width;
    ctx.drawImage(img, 0, 0);
    dataURL = canvas.toDataURL(outputFormat);
    resolve(dataURL);
    canvas = null;
  };
  img.src = url;
});

}

and a call this function

  this.convertToDataURLviaCanvas('https://www.google.de/images/srpr/logo11w.png', 'image/jpeg').then(imageData => {
  this.zip.file(image.file_name, imageData, {binary: true})

  this.zip.generateAsync({type: 'blob'}).then(content => {
        saveAs(content, 'images.zip');
      });
})

but there's an error with CORS

Failed to load https://www.google.de/images/srpr/logo11w.png: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

how can I fix it

This means that google.de server does not allow cross-origin requests, there is nothing that you can do here on client side. If you want to use google services, go via APIs for developers — TruckDriver, Dec 12 '17 at 11:58
One hacky way is , for chrome you can download the CORS plugin https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en — TruckDriver, Dec 12 '17 at 11:59
Actually I need to download any number of files from backend as archive — Andre1991, Dec 12 '17 at 12:05
what is you backend server? there in app-server you need to allow cross-origin requests — TruckDriver, Dec 12 '17 at 12:06
backend in Django and images stored in Amazon. and I get urls like this "https://projects.s3.amazonaws.com/images/main-proj/1 - Copy.jpg" — Andre1991, Dec 12 '17 at 12:11
You need to enable CORS on backend side, Ask the backend guy to enable cross origin requests they can follow this guide https://stackoverflow.com/questions/35760943/how-can-i-enable-cors-on-django-rest-framework/35761458 — TruckDriver, Dec 12 '17 at 12:12
For testing purpose, You can install the above plugin, specifically for your browser — TruckDriver, Dec 12 '17 at 12:20
so not for testing the only vaariant is enable cors in backend side? — Andre1991, Dec 12 '17 at 12:23

score 0 · Answer 1 · answered Dec 12 '17 at 12:37

You cannot download that file from the client code because the browser executing your code enforces, on behalf of the remote server, a no-cross-origin policy. You would have to apply changes to the Google server to be able to request the URL from the Google server.

What you can do is to have your very own backend download the file (using curl or whatever you have at hand), and either convert it there or loop it through to your frontend.

For instance, you could have a four-liner php script (or equivalent function in your backend technology) which you use for the loop-through:

<?php
header("Content-type: image/png");
echo(readfile("https://www.google.de/images/srpr/logo11w.png"));
?>

Download file from server Angular 2

1 Answers1