I am unable to set basic authentication headers

Question

I'm a newbie in angular. I'm trying to send a GET request to server with basic authentication headers, but it didn't work. Here is my code,

///////////////My app.js///////////////
var myApp = angular.module('myApp', ['ngRoute', 'ui.bootstrap']);

myApp.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider){
    $httpProvider.defaults.headers.common['Authorization'] = 'Basic YWRtaW46YWRtaW4=';
    $routeProvider
    .when('/', {
        controller: 'UserController',
        templateUrl: './app/views/homepage.html'
    })  
    .when('/users', {
        controller: 'UserController',
        templateUrl: './app/views/userlist.html'
    });
}]);

///////////////My userService.js///////////////
myApp.factory('UserService', function($http){
var factory = {};
var urlBase = 'http://xxx.xxx.xxx.xxx/api';
    factory.getUsers = function(){
        return $http.get(urlBase+'/getusers');
    };
    return factory;
});

When I called the service from controller, There were 2 errors shown in the browser's console,

OPTIONS http://xxx.xxx.xxx.xxx/api/getusers
XMLHttpRequest cannot load http://xxx.xxx.xxx.xxx/api/getusers. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 401.

While I send request via POSTMAN app, it work normally.

Thanks for help.

maddygoround maddygoround · Accepted Answer · 2015-09-04T04:01:55

This is clearly a cross-domain-request issue

Postman is an extension

Regular web pages can use the XMLHttpRequest object to send and receive data from remote servers, but they're limited by the same origin policy. Extensions aren't so limited. An extension can talk to remote servers outside of its origin, as long as it first requests cross-origin permissions.

For development purpose you can simply disable chrome's --disable-web-security,this will do the job for you.

or

You can simply use this chrome extension Allow-Control-Allow-Origin

I am unable to set basic authentication headers

3 Answers