How to assign basic authentication header to XMLHT

问题:

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.

回答1:

If you want to set the authorization header

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

回答2:

Solution:

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

回答3:

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.

回答4:

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://.