JQuery Ajax Basic Authentication Header doesn't work correctly

Question

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

You're probably showing us the request headers for a preflight OPTIONS request instead of a GET request. Is that right? — apsillers
– apsillers, Commented Dec 28, 2015 at 12:09

Community · Accepted Answer · 2017-05-23 10:29:35Z

11

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)

An HTTP verb other than HEAD, GET, or POST; or,
A request header other than 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.

edited May 23, 2017 at 10:29

CommunityBot

11 silver badge

answered Dec 28, 2015 at 12:21

apsillers

116k18 gold badges248 silver badges249 bronze badges

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

4 Comments

Fabian Bachl Over a year ago

Thanks, So the Problem basically lies with the server?

apsillers Over a year ago

@Bajellor Yes; if you need to send a a cross-origin request that includes the Authorization header, the server must (1) support CORS and (2) explicitly allow the Authorization header.

Fabian Bachl Over a year ago

Does the server need to implement a OPTIONS method in which it somehow checks if the authorization is allowed or something?

apsillers Over a year ago

The server must handle preflight requests sent with an OPTIONS method. The only thing the server needs to do during a preflight is (1) check Access-Control-Request-Method and include it in Access-Control-Allow-Methods if it doesn't have a problem with that method and (2) check Access-Control-Request-Headers and include them in Access-Control-Allow-Headers if it doesn't have a problem with any of the headers. Please read the linked articles and let me know if anything is still unclear. (Mine is shorter (stackoverflow.com/a/10636765/710446), but HTML5 Rocks is more thorough.)

Collectives™ on Stack Overflow

JQuery Ajax Basic Authentication Header doesn't work correctly

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related