Basic HTTP Authentication doesn't work in AngularJS

Question

My AngularJS driven frontend should use the Basic Auth. I've tried different approaches, but nothing works -- the request is sent without the Authorization header:

1. $http service object config

code

(function() {
    var app = angular.module('portfolio', []);
    app.controller('ProjectsListController', ['$http', function($http) {
        var projectsList = this;
        projectsList.projectsListData = [];
        $http.defaults.headers.common.Authorization = 'Basic dXNlcjpwd2Q=';
        $http.get(config['api_server_url'] + '/projects').success(function(data) {
            projectsList.projectsListData = data;
        });
    }]);
})();

request headers

OPTIONS /projects HTTP/1.1
Host: foo.bar.tld
Connection: keep-alive
Access-Control-Request-Method: GET
Origin: http://baz.buz.loc
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.118 Safari/537.36
Access-Control-Request-Headers: accept, authorization
Accept: */*
Referer: http://baz.buz.loc/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: de-DE,de;q=0.8,en-US;q=0.6,en;q=0.4,ru;q=0.2

2. request config:

code

(function() {
    var app = angular.module('portfolio', []);
    app.controller('ProjectsListController', ['$http', function($http) {
        var projectsList = this;
        projectsList.projectsListData = [];
        $http.get(config['api_server_url'] + '/projects', {
            headers: {'Authorization': 'Basic dXNlcjpwd2Q='}
        }).success(function(data) {
            projectsList.projectsListData = data;
        });
    }]);
})();

request headers

OPTIONS /projects HTTP/1.1
Host: foo.bar.tld
Connection: keep-alive
Cache-Control: max-age=0
Access-Control-Request-Method: GET
Origin: http://baz.buz.loc
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.118 Safari/537.36
Access-Control-Request-Headers: accept, authorization
Accept: */*
Referer: http://baz.buz.loc/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: de-DE,de;q=0.8,en-US;q=0.6,en;q=0.4,ru;q=0.2

3. app config

code

(function() {
    var app = angular.module('portfolio', []);
    app.run(['$http', function($http) {
        $http.defaults.headers.common['Authorization'] = 'Basic dXNlcjpwd2Q=';
    }]);
    app.controller('ProjectsListController', ['$http', function($http) {
        var projectsList = this;
        projectsList.projectsListData = [];
        $http.get(config['api_server_url'] + '/projects').success(function(data) {
            projectsList.projectsListData = data;
        });
    }]);
})();

request headers

Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:de-DE,de;q=0.8,en-US;q=0.6,en;q=0.4,ru;q=0.2
Access-Control-Request-Headers:accept, authorization
Access-Control-Request-Method:GET
Connection:keep-alive
Host:foo.bar.tld
Origin:http://baz.buz.loc
Referer:http://baz.buz.loc/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.118 Safari/537.36

So, the Authorization: Basic dXNlcjpwd2Q= header is missing. What is wrong here and how to get it working?

Answer 1

as in this question, you need to set configuration of $http service not in controller, but in the run or config block

app.run(['$http', function($http) {
    $http.defaults.headers.common['Authorization'] = /* ... */;
}]);