Angular JS - Blank Error Response

Question

I am learning Angular JS and am facing an issue with an the HTTP Get Request. Here is my code:

function countryController($scope,$http) {
delete $http.defaults.headers.common['X-Requested-With'];
$http.get("http://localhost:8080/countrybook/api/v1/countrybook")
    .success(function(response) {
        $scope.countries = response;
    })
    .error(function(response){
        alert(response);
    });
}

I get a blank error response (alert with nothing in it. when i debug in firebug i see that response is "") for some reason.

My headers look like this:

Response Headers:

Cache-Control   private, must-revalidate
Content-Length  355
Content-Type    application/javascript
Date    Sat, 15 Nov 2014 16:53:52 GMT
Last-Modified   Sat, 15 Nov 2014 16:52:06 GMT
Server  WebStorm 9.0.1

Request Headers:

Accept  */*
Accept-Encoding gzip, deflate
Accept-Language en-US,en;q=0.5
Cache-Control   max-age=0
Connection  keep-alive
Host    localhost:63342
If-Modified-Since   Sat, 15 Nov 2014 16:52:06 GMT
Referer http://localhost:63342/CountryBook/index.html
User-Agent  Mozilla/5.0 (Windows NT 6.3; WOW64; rv:32.0) Gecko/20100101 Firefox/32.0

and the Response that I see in Firebug is this:

function countryController($scope,$http) {
    delete $http.defaults.headers.common['X-Requested-With'];
    $http.get("http://localhost:8080/countrybook/api/v1/countrybook")
        .success(function(response) {
            $scope.countries = response;
        })
        .error(function(response){
            alert(response);
        });
}

Could you please help me figure out whats wrong? When I use the same link mentioned above in the http get request directly from the browser I see the response that I expect. Thanks for your help!

You seem to have mixed up the Firefox response? In case the response is "" the alert seems to display correctly ? I assume the answer to your question will be found on the backend side? — smartbart24
– smartbart24, Commented Nov 15, 2014 at 19:27
Hi SmartBart24. I checked the backend logs. My backend does send out the correct response. Also the same link works fine if I use it directly in the browser. The response I see in firebug is the same angular JS code that I have mentioned above. And I do get the alert as blank. I ran firebug and added a watch on response. The response is just empty. Not sure where I am going wrong. — takeradi
– takeradi, Commented Nov 15, 2014 at 19:36
Try to add $httpProvider.defaults.headers.common['Accept'] = 'application/json, text/javascript';$httpProvider.defaults.headers.common['Content-Type'] = 'application/json; charset=utf-8'; to your code — Alexey Semenyuk
– Alexey Semenyuk, Commented Nov 16, 2014 at 8:56
Doesn't work. Tried both of your solutions. It goes directly to the error block and shows an empty alert. Please let me know if I can provide you with more info. Tried what smartbart24 said. Looked at the console and now I get this: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at localhost:8080/countrybook/api/v1/countrybook. This can be fixed by moving the resource to the same domain or enabling CORS. — takeradi
– takeradi, Commented Nov 16, 2014 at 21:06
Solved it by adding these two headers at the server side: .header("Access-Control-Allow-Origin", "*") .header("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT") Smartbart24 - looking at the console logs helped. Thanks! — takeradi
– takeradi, Commented Nov 17, 2014 at 1:52

takeradi · Accepted Answer · 2014-11-17 01:56:26Z

3

The problem was:

The Same Origin Policy disallows reading the remote resource at localhost:8080/countrybook/api/v1/countrybook. This can be fixed by moving the resource to the same domain or enabling CORS.

Solved it by adding these two headers at the server side response:

.header("Access-Control-Allow-Origin", "*") 
.header("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT")

Smartbart24 - looking at the console logs helped. Thanks for your help!

answered Nov 17, 2014 at 1:56

takeradi

3,8718 gold badges31 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

smartbart24 · Accepted Answer · 2014-11-15 19:50:45Z

1

So without knowing your backend my general $http pattern is:

$http.get(requestEndpointString)
.success(function(data,status,headers,config){
    if(status!=200){
        /*unexpected response status ...*/
        console.log('API error status: '+status);
    }else{
        /* Success ... */
    }
})
.error(function(data, status, headers, config){
    /* Handle errors */
});

Maybe it helps you to debug with logging the response status ? Also try to take out the line:

delete $http.defaults.headers.common['X-Requested-With'];

answered Nov 15, 2014 at 19:50

smartbart24

5244 silver badges4 bronze badges

1 Comment

C0ZEN Over a year ago

That's help so much. I was thinking that error's callback had only one argument (response) and after that you can manage it with response.status but it doesn't work. It's because response was in reality data, and in that case, data was empty...

Collectives™ on Stack Overflow

Angular JS - Blank Error Response

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related