why doesn't $http work when Authorization header set?

Question

New to Angular - cant figure this one out. $http call doesn't reach the server when Authorization header is set. My function:

loginHttp: function(name, pw) {

        var req = {
         method: 'GET',
         url: 'http://mywebsite/login',
         headers: {
           'Authorization': "Basic "+ this.b64EncodeUnicode("user1:pass1")
         },
         data: { test: 'test' }
        }

        //$http.defaults.headers.common['Authorization'] = "Basic "+ this.b64EncodeUnicode("user1:pass1");

        //$http.defaults.headers.common['Accept'] = "text/html";

        $http(req).then(function(resp) {
          console.log('Success', resp);
          // For JSON responses, resp.data contains the result
        }, function(err) {
          console.error('ERR', err);
          // err.status will contain the status code
        } )
      },

Response is:

ERR Object { data: null, status: 0, headers: headersGetter/<(), config: Object, statusText: "" }

Works fine without header or setting another header e.g. Accept:...

Any help would be most appreciated.

my complete LoginService service is here:

.service('LoginService', function($q, $http) {
    return {
      loginHttp: function(name, pw) {
        alert(this.b64EncodeUnicode("teacherb:loops411"))

        var req = {
         method: 'GET',
         url: 'http://mywebsite/login',
         headers: {
           'Authorization': "Basic "+ this.b64EncodeUnicode("teacherb:loops411")
         },
         data: { test: 'test' }
        }

        //$http.defaults.headers.common['Authorization'] = "Basic "+ this.b64EncodeUnicode("teacherb:loops411");
        //$http.defaults.headers.common['Accept'] = "text/html";
        $http(req).then(function(resp) {
          console.log('Success', resp);
          // For JSON responses, resp.data contains the result
        }, function(err) {
          console.error('ERR', err);
          // err.status will contain the status code
        } )
      },

      b64EncodeUnicode: function (str) {
          return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
              return String.fromCharCode('0x' + p1);
          }));
      },

      loginUser: function(name, pw) {
        var deferred = $q.defer();
        var promise = deferred.promise;

        if (name == 'user' && pw == 'secret') {
          deferred.resolve('Welcome ' + name + '!');
        } else {
          deferred.reject('Wrong credentials.');
        }
        promise.success = function(fn) {
          promise.then(fn);
          return promise;
        }
        promise.error = function(fn) {
          promise.then(null, fn);
          return promise;
        }

        return promise;
      }
    }
  })

Looks like its a HTTP access control (CORS) issue - can't use auth header when accessing cross origin url. Only wish the error message had not been so non-descriptive of the problem - would have saved a lot of time. — user3299754

user3299754 user3299754 · Accepted Answer · 2016-02-18T20:27:56

Looks like its a HTTP access control (CORS) issue - can't use auth header when accessing cross origin url.

why doesn't $http work when Authorization header set?

1 Answers