Basic authentication using XHR

Question

I am trying to get some response from my server which needs basic authentication. So when I use curl as:

curl -u user:pass http://myserver.com/get/send-my-data

It is giving me correct response. But when I am creating an XHR request using jquery AJAX. I am having 403 error. Here is my AJAX setup:

            $.ajax ({
            type: 'GET',
            url: 'http://myserver.com/get/send-my-data',
            beforeSend: function(xhr) {
                xhr.setRequestHeader("Authorization", "Basic" + encode64(user:pass)); // I have calculated base64 encoded value of user:pass correctly.
            },
            success: function(d) { console.log(d); },
            crossDomain: 'true'
        });

I am having 403 response. Here is the request header obtained from curl using -v option.

> POST /get/send-my-data HTTP/1.1
**> Authorization: Basic ********** // Removed original code deliberately**
> User-Agent: curl/7.27.0
> Host: localhost:8080
> Accept: */*
> Content-Length: 264
> Expect: 100-continue
> Content-Type: multipart/form-data; boundary=----------------------------3c0e06f1e2b4

Here is the header obtained from charles of my XHR request

OPTIONS /get/send-my-data HTTP/1.1
Host    10.40.55.110:4502
Access-Control-Request-Method   GET
Origin  http://localhost:8080
User-Agent  Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.4 (KHTML,     like Gecko) Chrome/22.0.1229.79 Safari/537.4
**Access-Control-Request-Headers    origin, authorization, accept**
Accept  */*
Referer http://localhost:8080/proof/check.html
Accept-Encoding gzip,deflate,sdch
Accept-Language en-US,en;q=0.8
Accept-Charset  ISO-8859-1,utf-8;q=0.7,*;q=0.3

I could not understand why this is happening ? WHy my XHR request header is not showing Authorization header like shown in curl header. Please suggest where i am doing wrong.

PS: It is a cross domain request.

Answer 1

I was facing this issue because i was sending a Cross-domain request and request used POST method. So when we have POST on a cross-domain server, there is a concept of preflight which comes in picture.

In Preflight, it just sends the options header and tells the resource on which request is going to be hit. Then server decides if it is safe to send the request or not.

And then if server sends OK, actual request is sent. May be these lines will be more explanatory.

Preflighted requests first send an HTTP request by the OPTIONS method to the resource on the other domain, in order to determine whether the actual request is safe to send. Cross-site requests are preflighted like this since they may have implications to user data. In particular, a request is preflighted if:

It uses methods other than GET, HEAD or POST. Also, if POST is used to send request data with a Content-Type other than application/x-www-form-urlencoded, multipart/form-data, or text/plain, e.g. if the POST request sends an XML payload to the server using application/xml or text/xml, then the request is preflighted.

It sets custom headers in the request (e.g. the request uses a header such as X-PINGOTHER)

Source: MDN CORS Documentation