I am trying to make a simple GET request on a Server in JQuery.
$.ajax({
headers: {
"Authorization": "Basic " + btoa("hello" + ":" + "world")
},
url: "http://hello.world?Id=1",
method: "GET",
success: function () {
},
}).then(function () {
});
The Problem is that when the Request gets sent, the Authentication Header is not put into the request correctly:
Host: hello.world
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:43.0) Gecko/20100101 Firefox/43.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: de,en-US;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Access-Control-Request-Method: GET
Access-Control-Request-Headers: authorization
Origin: null
Connection: keep-alive
Cache-Control: max-age=0
When sending an HTTP request to another origin, the request can be either "simple" or "non-simple". A request becomes non-simple if it uses either (or both)
Accept
, Accept-Language
, Content-Language
, or Content-Type
Since your request sets the Authorization
header, it is non-simple.
When a request is non-simple, the browser first sends a preflight request using the OPTIONS method. That's the request you're seeing in your question. (See HTML5 Rocks on preflight requests and [my answer on How does Access-Control-Allow-Origin header work?). The preflight doesn't include the non-simple headers, but lists them in the Access-Control-Request-Headers
header.
If the server responds to the preflight correctly, the browser will then issue the real request. In this case, the browser is looking for the response header Access-Control-Allow-Headers: Authorization
from the server to indicate that the non-simple Authorization
header is okay to send in the actual request. Your server must include that header in its response.