jquery - Why my server ignores the authentication headers from an ajax request?

Question

From JavaScript I used:

xhr.setRequestHeader("Authorization", make_base_auth(username,password));

However the HTTP request doesn't have an Authorization header:

OPTIONS /restService/index?_=1362589672203 HTTP/1.1
Host: myappinheroku.herokuapp.com
User-Agent: Mozilla/5.0 (Windows NT 6.1; rv:19.0) Gecko/20100101 Firefox/19.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: es-MX,es-ES;q=0.8,es-AR;q=0.7,es;q=0.5,en-US;q=0.3,en;q=0.2
Accept-Encoding: gzip, deflate
Origin: http://127.0.0.1:8081
Access-Control-Request-Method: GET
Access-Control-Request-Headers: authorization,content-type
Connection: keep-alive

It seems that authentication is being ignored entirely. What is wrong? How do we enable authentication for CORS?

---

This is the server's response of above request:

HTTP/1.1 401 Full authentication is required to access this resource
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: origin, authorization, accept, content-type, x-requested-    with
Access-Control-Allow-Methods: GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS
Access-Control-Allow-Origin: *
Access-Control-Max-Age: 3600
Server: Jetty(7.x.y-SNAPSHOT)
Set-Cookie: JSESSIONID=6smxjnlqelmc1lg98ain16wv7;Path=/
WWW-Authenticate: Basic realm="Ralph's Bait and Tackle"
Transfer-Encoding: chunked
Connection: keep-alive

Answer 1

The value * cannot be used for the Access-Control-Allow-Origin header when Access-Control-Allow-Credentials is true. You will need to set Access-Control-Allow-Origin to the value of the Origin itself (i.e. http://127.0.0.1:8081 in this case).

Also note that the auth credentials are not sent on the preflight request. They are only sent on the actual request. The preflight is only used to verify that the CORS request is allowed, it should not do any authentication itself.