jQuery ajax header not set

Question

I'm trying to implement a cross-domain request and am failing miserably. I'm trying this on latest versions of Firefox, Chrome, and IE10. I'm getting the same experience in all browsers. I'm trying to set either the Authentication header or a custom header key/value pair so I can pick up the value on my server. I'm using jQuery 2.03.

$.ajax({
    type: "GET",
    beforeSend: function (xhr, settings)
    {
        $.extend(settings, { headers: { "Authorization": "121212" } });
    },
    url: url,
    dataType: "json",
    processData: false,
    crossDomain: true,
    success: function (msg)
    {
        alert('it works!!!');
    },
    error: function (jqXHR, textStatus, errorThrown)
    {
        alert("error dude: " + JSON.stringify(jqXHR));
    }       
});

The Authorization header value on the server is null. I've tried replacing Authorization with a custom key and it doesn't get set. I've tried adding this to the ajax call:

headers: { Authorization: "fooooo" },

But doing so results in the ajax call never reaching the server. My breakpoints are never reached when I add headers: attribute to the ajax call. However, if I leave this out, then my breakpoints are hit.

I'm making a call to ASP.Net MVC WebApi controller. I have a Handler created to intercept the request and retrieve the Authorization value so I can authenticate the user for their trip to my WebAPI:

    public class AuthorizationHeaderHandler : DelegatingHandler
{
    protected override Task<HttpResponseMessage> SendAsync
    (
        HttpRequestMessage request, 
        CancellationToken cancellationToken
    )
    {
        IEnumerable<string> apiKeyHeaderValues;

        if (request.Headers.TryGetValues("Authorization", out apiKeyHeaderValues))
        {
            var apiKeyHeaderValue = apiKeyHeaderValues.First();
            var user = SecurityRepository.GetUserByUserKey(apiKeyHeaderValue);

            IList<Claim> claimList = new List<Claim>();
            claimList.Add(new Claim(ClaimTypes.Name, user.Name));
            claimList.Add(new Claim(GALClaimTypes.UserKey, user.UserKey.ToString(CultureInfo.InvariantCulture)));
            claimList.Add(new Claim(GALClaimTypes.AuthenticationId, user.AuthenticationId.ToString(CultureInfo.InvariantCulture)));
            claimList.Add(new Claim(GALClaimTypes.PersonId, user.PersonId.ToString(CultureInfo.InvariantCulture)));

            claimList.Add(user.EmailAddress != null
                              ? new Claim(ClaimTypes.Email, user.EmailAddress)
                              : new Claim(ClaimTypes.Email, "unknown"));

            var identity = new ClaimsIdentity(claimList, "ApiKey");
            var principal = new ClaimsPrincipal(identity);

            Thread.CurrentPrincipal = principal;
        }

        return base.SendAsync(request, cancellationToken);
    }
}

This code never fires because the Authorization cannot be set. What am I missing. I've read a lot of posts that seem to use my approach and it seems to work for them. Any insight is greatly appreciated. Thanks for your help.

Have you tried using the `headers` property instead of setting it in `beforeSend`? — CodingIntrigue, Oct 04 '13 at 06:48

score 1 · Accepted Answer · answered Oct 04 '13 at 06:54

1

Try this,

....
  type: "GET",
  beforeSend : function(xhr) {
    xhr.setRequestHeader("Authorization", "Foooo");
  },
....

Read setRequestHeader() and $.ajax()

answered Oct 04 '13 at 06:54

Rohan Kumar

40,431
11
76
106

This may help you http://stackoverflow.com/questions/11540086/jquery-ajax-header-authorisation – Rohan Kumar Oct 04 '13 at 07:12
I ended up deleting then recreating my IIS site for the WebAPI calls. I added xhr.setRequestHeader("Authorization", "Foooo"); and it worked. I know I used xhr.setRequestHeader("Authorization", "Foooo"); before and it wasn't working. Could be a product of being up at 2am too. Thanks for your help. – Tom Schreck Oct 04 '13 at 15:33

jQuery ajax header not set

1 Answers1