Jquery Ajax doesn't send authorization header

Question

I try to make basic authentication with Jquery Ajax. I add authorization header to ajax request like this.

$.ajax({
    headers: {
        "authorization": "basic 123456",
    },
    crossDomain: true,
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: 'http://example.com/Auth.asmx/Authorization',
    data: null,
    dataType: "jsonp",
    success: function (data, status) {
            console.log("Success");
            console.log(data);
    },
    error: function (xmlRequest) {
        console.log("Error");
        console.log(xmlRequest);
    }
});

Then in ASP.Net web service I try get this header.

[WebMethod]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
public void Authorization(string callback)
{
   string headers = GetRequestHeaders();
}

public string GetRequestHeaders()
{
    HttpContext ctx = HttpContext.Current;
    if (ctx == null || ctx.Request == null || ctx.Request.Headers == null)
    {
        return string.Empty;
    }
    string headers = string.Empty;
    foreach (string header in ctx.Request.Headers.AllKeys)
    {
        string[] values = ctx.Request.Headers.GetValues(header);
        headers += string.Format("{0}: {1}", header, string.Join(",", values));
    }

    return headers;
}

When I print to headers I can't see authorization header

Cache-Control: no-cache
Connection: keep-alive
Pragma: no-cache
Accept: /
Accept-Encoding: gzip, deflate
Accept-Language: tr-TR,tr;q=0.9,en-US;q=0.8,en;q=0.7
Host: example.com
Referer: http://localhost:9200/test.html
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36

Why i can't see authorization header and how can i get this value?

P.S. I use Jquery 2.2.3 in client side

I tried something different. I created Node JS server in my local than I send it same request to it. Authorization header still can't be show.

I used an application "Postman" to created and send a request. I add authorization header then send to my servers (both ASP.Net and Node JS). I saw authorization header in requests from this application.

For ASP.Net the output is

Cache-Control: no-cache

Connection: keep-alive

Accept: /

Accept-Encoding: gzip, deflate

Authorization: Basic 12345

Host: 192.168.1.100

User-Agent: PostmanRuntime/7.17.1

Postman-Token: 5911bb3a-ea8a-4f81-8579-7e6aed3ced61

Then I took Jquery AJAX output from Postman application for creating this request.

  var settings = {
  "async": true,
  "crossDomain": true,
  "url": "http://192.168.1.107:1800",
  "method": "GET",
  "headers": {
    "Authorization": "Basic 12345",
    "User-Agent": "PostmanRuntime/7.17.1",
    "Accept": "*/*",
    "Cache-Control": "no-cache",
    "Postman-Token": "5911bb3a-ea8a-4f81-8579-7e6aed3ced61,3455808c-4a4f-4108-b819-f061b5a8e37e",
    "Host": "192.168.1.100",
    "Accept-Encoding": "gzip, deflate",
    "Connection": "keep-alive",
    "cache-control": "no-cache"
  }
}

$.ajax(settings).done(function (response) {
  console.log(response);
});

I changed my Ajax settings like this.

 $.ajax({
        "async": true,
        "crossDomain": true,
        "url": "http://192.168.1.107:1800",
        "method": "GET",
        "headers": {
          "Authorization": "Basic 12345",
          "User-Agent": "PostmanRuntime/7.17.1",
          "Accept": "*/*",
          "Cache-Control": "no-cache",
          "Postman-Token": "5911bb3a-ea8a-4f81-8579-7e6aed3ced61,3455808c-4a4f-4108-b819-f061b5a8e37e",
          "Host": "192.168.1.100",
          "Accept-Encoding": "gzip, deflate",
          "Connection": "keep-alive",
          "cache-control": "no-cache"
        },
        success: function (data, status) {
                console.log("Success");
                console.log(data);
                callback("Authorization OK");
        },
        error: function (xmlRequest) {
            console.log("Error");
            console.log(xmlRequest);
            callback("Authorization Error");
        }
    });

When I send same request to my servers I couldn't see authorization header again.

Headers for my requests

"host":"192.168.1.107:1800",

"connection":"keep-alive",

"pragma":"no-cache", "cache-control":"no-cache",

"access-control-request-method":"GET",

"origin":"http://localhost:9200",

"user-agent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36",

"access-control-request-headers":"authorization,cache-control,postman-token",

"accept":"/",

"referer":"http://localhost:9200/main.html",

"accept-encoding":"gzip, deflate",

"accept-language":"tr-TR,tr;q=0.9,en-US;q=0.8,en;q=0.7"

Julián Julián · Accepted Answer · 2019-12-03T14:22:19

Try this bro:

JS Code (AJAX)

$.ajax({
    crossDomain: true,
    type: "POST",
    beforeSend: function (xhr) {
                    xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
                    xhr.setRequestHeader('Authorization', 'Hello 123456');
                },
    contentType: "application/json; charset=utf-8",
    url: 'http://example.com/Auth.asmx/Authorization',
    data: "{'callback':'test'}",
    dataType: "jsonp",
    success: function (data, status) {
        console.log("Success");
        console.log(data);
    },
    error: function (xmlRequest) {
        console.log("Error");
        console.log(xmlRequest);
    }
});

and you can read the value with:

C# Code

string auth = HttpContext.Current.Request.Headers["Authorization"];

NOTE: If this does not work try to configure the cross origin request in your version of IIS, you can do it from the Web.config or from the IIS administration panel depending on the version: https://enable-cors.org/server_iis7.html

Jquery Ajax doesn't send authorization header

1 Answers