How to assign basic authentication header to XMLHTTPREQUEST?

Question

I've read many answers of preflight and CORS so please do not post links referencing what I should read. Many of the answers are from a server-perspective, but I am the client in this case. Do I set the origin header? My assumption is that this is a simple request, am I right?

 req.open("POST", url, true);
 req.setRequestHeader( 'Content-Type',   'application/blahblah' );
 req.setRequestHeader( 'Accept', 'application/blahblah' );
 req.setRequestHeader("Authorization", "Basic " + btoa(user + ":" + pass)); 
 req.send();

Yet its still not working, my error:

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 500.

epascarello · Accepted Answer · 2015-11-03 17:15:53Z

38

If you want to set the authorization header

req.setRequestHeader('Authorization','Basic ' + Base64StringOfUserColonPassword);

answered Nov 3, 2015 at 17:15

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

carrots Over a year ago

req.setRequestHeader("Authorization", "Basic " + Base64.encode(user + ":" + pass)) ?? Where is this function coming from? An external lib?

carrots Over a year ago

Actually sorry I added this: req.setRequestHeader("Authorization", "Basic " + btoa(user + ":" + pass)); and it still doesnt work

Ronnie Smith Over a year ago

window.btoa, not just btoa

SanjiMika Over a year ago

Please see the last response in the post. Thank @NickSpicer. var invocation = new XMLHttpRequest(); invocation.open("GET", url, true, username, password); invocation.withCredentials = true;

Agustín Clemente Over a year ago

On pure JavaScript it is: Buffer.from(user + ":" + password).toString('base64');

|

Shaze · Accepted Answer · 2021-07-18 09:00:55Z

13

Solution:

var req = new XMLHttpRequest();
    req.setRequestHeader('Authorization', 'Basic [base64 encoded password here]' );

edited Jul 18, 2021 at 9:00

Shaze

1,0051 gold badge13 silver badges19 bronze badges

answered Nov 6, 2015 at 18:11

carrots

8251 gold badge9 silver badges19 bronze badges

1 Comment

SanjiMika Over a year ago

Please see the last response in the post. Thank @NickSpicer. var invocation = new XMLHttpRequest(); invocation.open("GET", url, true, username, password); invocation.withCredentials = true;

Nick Spicer · Accepted Answer · 2017-04-24 10:04:31Z

6

If using this for an API request, adding the Authorization header will first make XMLHttpRequest send an OPTIONS request, which may be denied by some APIs.

To get around this you can also do:

var invocation = new XMLHttpRequest();
invocation.open("GET", url, true, username, password);
invocation.withCredentials = true;

Which will add the Authorization header and also avoid the preflight request.

answered Apr 24, 2017 at 10:04

Nick Spicer

2,7174 gold badges24 silver badges27 bronze badges

1 Comment

Agustín Clemente Over a year ago

What's the equivalent on 'http' ? (require('http'))

davidjenkins · Accepted Answer · 2017-08-01 16:19:15Z

6

This post is old, but answering for anybody else who comes across it.

There is nothing wrong with your authorization header. The problem you are facing is CORS related.

You don't set the Origin header yourself. The browser does that for you. If your origin is null then I suspect this is because you are running your code from file:/// instead of http://.

answered Aug 1, 2017 at 16:19

davidjenkins

9291 gold badge9 silver badges15 bronze badges

2 Comments

Foxhound Over a year ago

Think I might be having this issue. Do you have any solutions?

Dovev Hefetz Over a year ago

At least for chrome, run the browser with this flag --allow-file-access-from-files

Collectives™ on Stack Overflow

How to assign basic authentication header to XMLHTTPREQUEST?

4 Answers 4

6 Comments

1 Comment

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related