angularjs basic authentication headers

Question

I'm trying to connect to API and send authentication headers. I'm using Base64 as described here How do I get basic auth working in angularjs?

function Cntrl($scope, $http, Base64) {

$http.defaults.headers.common['Authorization'] = 'Basic ' + Base64.encode('----myusername----' + ':' + '----mypass---');
$http({method: 'GET', url: 'https://.../Category.json'}).
    success(function(data, status, headers, config) {
        console.log('success');
    }).
    error(function(data, status, headers, config) {
        alert(data);
        });
}

but i'm getting this error

XMLHttpRequest cannot load https://.../Category.json?callback=?. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://....com' is therefore not allowed access. The response had HTTP status code 400.

Answer 1

Looks like you are running into issues with Cross-Origin Resource Sharing (CORS). Have a read of: How does Access-Control-Allow-Origin header work?

If you control the server then you can have it send back an appropriate Access-Control-Allow-Origin header as per what the server code in the question you referenced (How do I get basic auth working in angularjs?)