Cannot access 'WWW-authenticate' header within $http response in angular

Question

Can anyone tell me why my 'WWW-Authenticate' header is null in the response, eventhough I am able see the stringified 'WWW-Authenticate' header object in the Chrome dev tools?

On the server side I am doing the following to set my WWW-Authenticate header as well as set the proper headers for CORS:

res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8080');
res.setHeader('Access-Control-Expose-Headers', 'WWW-Authenticate');
res.setHeader('WWW-Authenticate', JSON.stringify({
    "token": "encryptedToken", 
    "message": "encryptedMessage"
}));

I believe that I am setting the header correctly on the server side, because When I look at the Chrome Dev tools, I see the following under "Response Headers" for the request that is being made.

Response Headers
Access-Control-Allow-Origin:http://localhost:8080
Access-Control-Expose-Headers:WWW-Authenticate
Connection:keep-alive
Date:Fri, 15 May 2015 13:48:29 GMT
ETag:W/"f7-1470611871"
WWW-Authenticate: {"token":"encryptedToken","message":"encryptedMessage"}
X-Powered-By:Express

HOWEVER, when I try to access the "WWW-Authenticate" header from within the response, I get NULL.

$http.get("http://localhost:4242/days")
.then(function (response) {
    var AuthHeader = response.headers('WWW-Authenticate');
    console.log (AuthHeader); // returns null
})

Thank you for your help in advance!

Answer 1

The Access-Control-Expose-Headers header can be set to include www-authenticate. This header will allow clients, including Angular, to read those response headers on a CORS request.

If you're using ASP.NET Web API, then you set the exposedHeaders either directly on the System.Web.Cors.CorsPolicy.ExposedHeaders parameter or you can add an attribute to the controller method. The attribute method is described at Enabling Cross-Origin Requests in ASP.NET Web API 2.

Here are a couple examples using ASP.NET Web API.

Example: Setting the ExposedHeaders parameter

var corsPolicy = new CorsPolicy();
corsPolicy.ExposedHeaders.Add("www-authenticate");

var corsOptions = new CorsOptions
{
    PolicyProvider = new CorsPolicyProvider
    {
        PolicyResolver = context => Task.FromResult(corsPolicy)
    }
};

app.UseCors(corsOptions);

Example: Using an attribute

[EnableCors(origins: "*", headers: "*", methods: "*", exposedHeaders: "www-authenticate")]
public class TestController : ApiController
{
    // ...
}

If you're using a different framework for your API, then you'll need to research that framework to see how to set the Access-Control-Expose-Headers header.

Answer 2

Ok... So after a bit of trial and error we've figured this out. I had though that pre-pending X- to custom headers was an outdated and unneccessary paractive, however it appears that either the browser being used in this case or perhaps angular itself is expecting it.

Changing the header name from:

WWW-authenticate

to

X-WWW-authenticate

Resolves the issue. If anyone can shed any light on this please do.

In fact, referencing the first answere here: Custom HTTP headers : naming conventions the use of X- has been deprecated and in fact the headers should just be 'sensibly named' sans any prefix. Perhaps consider renaming to:

appName-authenticate

Or similar as a best practice.