Angular.js saying custom HTTP response header is null

Question

The callback function for the POST is returning null for my custom HTTP header X-Auth-Token. Chrome is showing the correct POST response headers, but Angular.js is not.

The only ones Angular is returning are Cache-Control and Content-Type. Everything else shows null.

This is my CoffeeScript showing how I'm calling it:

.factory 'loginFactory', ($rootScope, $http, $resource) ->
    $resource '/api/auth/login',
        email: '@id'
        password: '@id'

.controller 'userController', ($scope, $state, $http, loginFactory, userService) ->
    $scope.validationError = false
    $scope.user =
        email: ''
        password: ''

    $scope.loginUser = ->
        loginFactory.save $scope.user, (u, headers) ->
            console.log headers('X-Auth-Token')
        .$promise.then (response) ->
            unless response.error
                userService.login($scope.user.email, $scope.user.password)

                unless userService.redirIfLoggedIn()
                    $scope.validationError = true

I also tried running earlier versions Angular 1.3.x, and those had the same issue.

Why is Angular only returning those two headers when I make a request?

Answer 1

Thanks for this solution goes to @dbugger who commented the answer I needed:

Looks like the server needs to give permission to see the headers. Check out this: Reading response headers when using $http of Angularjs

The proper way to make headers available outside of your local domain is to set: Access-Control-Expose-Headers on your webserver. In this particular case, you would put X-Auth-Token.