Downloading Files With Angular

Breaking Free From The Same Origin Policy

Lucio Francisco
Wizdm Genesys

--

Photo by Mateus Campos Felipe on Unsplash

Developing a single page application is fun, most of the time. Crafting the perfect piece of code to get the browser do what you want, instead of what has been designed for, gives you the thrill. At times, it will feel like being on a mission to rectify a browser’s misfortune such as in this article’s case.

Downloading Files

Immagine your application store files that you allow the users to download at times. The download attribute on a <a> element should do the trick, at least this is what it has been introduced for, so your download code would look something like this:

The example above is meant to display a nice Material Icon Button that, when clicked, will trigger the fileName file to download from sourcePath.

Unfortunately, although working, this solution is cursed by the same-origin policy; Meaning the browser will download the file only when located on the very same host of your application.

--

--

Lucio Francisco
Wizdm Genesys

I believe that whatever problem we’re puzzling ourselves with, once we really get to the bottom of it the solution has to be simple