AngularJS WebApi Authorization header does not appear to be getting passed

Question

I am trying to create a call with AngularJS v1.3.15 into ASP.NET WebAPI (latest from Nuget) to get a list of customers. I can successfully authenticate and get back a token. I add the token to an Authentication header but when I make the call it gets kicked back saying the Authentication header is missing.

The Angular call after I get the token looks like this

$scope.baseUrl = "http://localhost:7800/";    
$http({
  method: 'GET',
  url: $scope.baseUrl + 'customer',
    headers: {
      'Authorization': $scope.token
    }})

I have also tried to utilize the angularjs $resourse

return $resource($scope.baseUrl + 'customer', { }, { 'get': { method: 'GET', isArray: true, headers: { 'Authorization': $scope.token } } });

In the WebApiConfig Register method I have the following setup

var cors = new EnableCorsAttribute("*","*","*");
config.EnableCors(cors);

in a DelegatingHandler I check for the Authorization header like so

var authHeader = request.Headers.Authorization;

From the Angular app it is always null. If I run a check from Fiddler and PostMan I get the Authorization header just fine.

When I press F12 from Chrome and look at the request header these are the results

OPTIONS /customer HTTP/1.1
Host: localhost:7800
Connection: keep-alive
Access-Control-Request-Method: GET
Origin: http://localhost:63342
User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2376.0 Safari/537.36
Access-Control-Request-Headers: accept, authorization
Accept: */*
Referer: http://localhost:63342/Test/index.html
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8

When you press F12 in your browser and click the network tab does the request show the expected header? — Cerad
No it is not there, updated the question is the chrome request header — Chadit
So you know the problem is on the client side. Now do a search for $http interceptors and you will find several hundred examples of how to add the authentication header to your request. It also looks like you have some CORS (cross origin requests) going on so you may bump into a problem there as well. But the first first step is to send the header. — Cerad

Chadit Chadit · Accepted Answer · 2015-04-28T23:14:14

Fixed my issue, after some searches I found that OPTIONS does not seem to be supported out of the box. I found that if I add NuGet package Microsoft.Owin.Cors and then add

app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);

to the startup.cs file

AngularJS WebApi Authorization header does not appear to be getting passed

1 Answers