JavaScript - How to set request header for a browser GET

javascript rest browser http-headers httprequest

43,620

Solution 1

In more recent browsers, you might be able to use blobs:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick="tryit();">PDF</button>
<script>
    function tryit() {
        var win = window.open('_blank');
        downloadFile('/pdf', function(blob) {
            var url = URL.createObjectURL(blob);
            win.location = url;
        });
    }
    function downloadFile(url, success) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.setRequestHeader("Authorization", "Basic " + btoa("username:password"));
        xhr.responseType = "blob";
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if (success) success(xhr.response);
            }
        };
        xhr.send(null);
    }

</script>
</body>
</html>

In IE, ask the user:

window.navigator.msSaveOrOpenBlob(blob, 'readme.pdf');

P.S. You can test the backend in Node:

router.get('/pdf', function(req, res) {
  if(req.headers.authorization !== 'Basic dXNlcm5hbWU6cGFzc3dvcmQ=') return res.status(403).send('Not allowed');
  res.sendFile(path.join(__dirname, 'public', 'render.pdf'));
});
router.get('/', function(req, res) {
  res.render('index');
});

Solution 2

I think this is what you are looking for... Or correct me if i am wrong.

https://developer.mozilla.org/en/docs/Setting_HTTP_request_headers

Solution 3

Does it have to be a GET?

The reason I am asking is that you could just have a POST form (to a target="_BLANK") that posts whatever but shows an embedded file in a new window. Of course this wouldn't solve the issue with your custom headers, but then since you can also POST using jquery.ajax - which does allow you to set your own headers - you'd have the best of both worlds.

Here's a jQuery plugin that creates such a form dynamically in order to download whichever file. You could use this as a reference...

Hope this helps

Solution 4

If you don't care about hiding or obfuscating the user credentials then just use plain GET authentification: use http://username:[email protected]/ instead of http://MyApi.com/

View more solutions

43,620

Author by

IsmailS

HTML5, JavaScript, BackboneJS, AngularJS, jQuery, REST, OpenRasta, ASP.NET, ASP.NET MVC, WCF developer, SDET, C#, VB.NET Agile Techinical Lead Like swimming, reading non-fiction/motivational http://toolsforwebdevelopers.blogspot.com

Updated on November 23, 2021

Comments

IsmailS over 2 years

If we do window.location = "http://MyApi.com/Pdf";, browser does a GET of the URL http://MyApi.com/Pdf. But if we want to set authentication header of the request before doing GET of the URL because the server is a REST server and it doesn't support cookies. How to do this?

In all of the cases, I'm using $.ajax to call service but this time I need to show the response in a new window. Response is a PDF file content.

Thanks in advance.
Murali VP over 12 years

Doesn't quite answer the question I believe, the response is a PDF document to be rendered by the browser.
IsmailS over 12 years

Thanks v much for replying. I have a custom authentication mechanism. :(. So the value of authorization header looks something like CompanyNameToken <hashOfToken>. I wouldn't mind including the token in the URL if there is some quirk possible like this one.
IsmailS over 12 years

Let me clarify again. I don't need to set header for ajax request. I want to set header for full GET request of the page. I'm already using the beforeSend to set the header for all ajax request.
malix about 8 years

Yes, with Chrome 48 -> Node 0.12 Mark it up? :)
IsmailS about 8 years

supported by major latest browsers. But still in draft. developer.mozilla.org/en/docs/Web/API/URL/…
IsmailS over 2 years

Please provide some working code example to support your answer?