AngularJS can't use Basic Authentication

Question

I've problem with settings header. My js script

var invocation = new XMLHttpRequest();
        var url = 'http://example.com/api/auth';
        var handler = [];

        if(invocation) {    
            invocation.open('GET', url, true);
            invocation.setRequestHeader('X-PINGOTHER', "DDD");
            invocation.setRequestHeader('Access-Control-Allow-Origin', "http://localhost");
            invocation.setRequestHeader('Access-Control-Request-Headers', true);
            invocation.onreadystatechange = handler;
            invocation.send(); 
          }

Header from firebug:

OPTIONS /api/auth HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0 (Windows NT 6.2; WOW64; rv:18.0) Gecko/20100101 Firefox/18.0  FirePHP/0.7.4
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Origin: http://localhost
Access-Control-Request-Method: GET
Access-Control-Request-Headers: access-control-allow-origin,x-pingother
x-insight: activate
Connection: keep-alive

As you can see it always adds to the Access-Control-Request-Headers as value, and sets OPTIONS no GET. Any idea?

Answer 1

You should use the $http that comes with AngularJS, much better:

$http.defaults.useXDomain = true; //enable cors

$http({
    method: 'GET', 
    url: 'http://example.com/api/auth', 
    headers: {'X-PINGOTHER': 'DDD'}
 });

Answer 2

All right, it's working, but not with GET. How it's should be:

$http({
    method: "GET",
    url: "http://example.com/api/auth"
    }).success(function(data) {
        $scope.user = data;
    }).error(function(data) {
        console.log("error");
    });

Working example :

$http.jsonp('http://example.com/api/auth?&callback=JSON_CALLBACK')
        .success(function(data){
            console.log(data);
        }).error (function(data){
            alert("eerrror");
        }); 

It works only with JSONP.