Using Javascript to add custom http header and trigger file download

Question

I would like to start a simple file download through the browser, however an access token must be passed with a custom HTTP header:

GET https://my.site.com/some/file Authorization: access_token

How can I inject the Authorization: header following the site URL? I know it's possible to do that using query string, but I want to do it using headers.

I'm familiar with XMLHttpRequest, but as far as I understand it does not trigger download, it only reads content and the file I want to download is few hundred MBs at least.

xhr.setRequestHeader('Authorization', 'access_token');

This looks like a simple task, but I'm inexperienced coder so any help would be nice. Thanks.

Why not do it on the serverside, where you'd normally set the headers ? — adeneo
– adeneo, Commented May 16, 2013 at 16:27
Because file I want to download is not on my server. My server only generates token. Also, I do not want to use any PHP relaying since this would cost me a lot of traffic. — user2370553
– user2370553, Commented May 16, 2013 at 17:21

Community · Accepted Answer · 2017-05-23 11:59:58Z

I think this solves your problem:

function toBinaryString(data) { var ret = []; var len = data.length; var byte; for (var i = 0; i < len; i++) { byte=( data.charCodeAt(i) & 0xFF )>>> 0; ret.push( String.fromCharCode(byte) ); } return ret.join(''); } var xhr = new XMLHttpRequest; xhr.open( "GET", "https://my.site.com/some/file" ); xhr.addEventListener( "load", function(){ var data = toBinaryString(this.responseText); data = "data:application/text;base64,"+btoa(data); document.location = data; }, false); xhr.setRequestHeader("Authorization", "access_token" ); xhr.overrideMimeType( "application/octet-stream; charset=x-user-defined;" ); xhr.send(null);

Modified answer https://stackoverflow.com/a/10518190/2767026 to fit your needs.

@Oleksii I dont know, answered a long time ago and at the time this code fit my needs... :( I'm sorry.
Actually it is. As so: link.attr({ "href": data, "download": name + new Date().valueOf() + ext })

Olivier Lecrivain · Accepted Answer · 2015-07-16 09:47:04Z

It is not possible to add custom http header when you download a file by clicking on a link.

However, in your use case, you might store the token in a cookie, which will be automatically added to all browser requests.

Community · Accepted Answer · 2017-05-23 11:59:58Z

-1

https://stackoverflow.com/a/12372670/1961561 could be a solution for your problem.

$.ajax({ url: "/test", headers: {"X-Test-Header": "test-value"} });

edited May 23, 2017 at 11:59

CommunityBot

11 silver badge

answered May 16, 2013 at 16:32

carlptr

397 bronze badges

3 Comments

user2370553 Over a year ago

Thanks, it look like what i want, but i don't use jQuery. Is the a way to do this in "pure javascript"?

user2370553 Over a year ago

Nop, it still does not trigger download.

LordDawnhunter Over a year ago

You can't use ajax to download and save a file to disk for security reasons

Collectives™ on Stack Overflow

Using Javascript to add custom http header and trigger file download

3 Answers 3

3 Comments

Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

3 Comments

Linked

Related