Using Javascript To Add Custom Http Header And Trigger File Download

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:

Solution 1:

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(){
    vardata = 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.

Solution 2:

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

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

Solution 3:

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.