AngularJS - $http get returns error with status 0?

Question

I've an AngularJS application in which I'm trying to get an XML data with $http get from a server say http://example.com/a/b/c/d/getDetails?fname=abc&lname=def (this when accessed manually by entering the link in a browser shows a tree structure of the XML file).

When I run the application the data from that link is not fetched. Instead its showing an error with status 0.

//url = http://example.com/a/b/c/d/getDetails?fname=abc&lname=def
$http.get(url).success(function (data){
                alert("Success");
                deferred.resolve(data);
            }).error(function (data, status){
                console.log("Error status : " + status);
            });

I'm not sure why the $http.get fails and goes to the error function returning status 0.

But if I pass an URL to the local server which has a JSON object, it works.

Is the problem because of me trying to access the XML file from a different domain(CORS issue?) or something else?

Please help me out!

Answer 1

You have HTTP access control (CORS) issues .

The server answering your REST requests MUST include the headers specified by CORS in order to allow Angular to consume properly the response. Essentially this means including the Access-Control-Allow-Origin header in your response, specifying the servers from where the request comes from, that are allowed. (ref)

There is directive Angular allows one to get/set the whitelists and blacklists used to ensure that the URLs used for sourcing Angular templates are safe.