Angular $http.json promise returning error, though I can see the response

Question

I am somewhat new to working with http promise objects.

I am using Angular JS to return json from an API http://www.asterank.com/api.

I have an angular controller making the call like so:

  $http.jsonp('http://www.asterank.com/api/asterank?query={%22e%22:{%22$lt%22:0.1},%22i%22:{%22$lt%22:4},%22a%22:{%22$lt%22:1.5}}&limit=1&callback=JSON_CALLBACK').
success( function(data) {
  console.log('great success');
}).error( function(r,t,et){
  console.log(r);
  console.log(t);
  console.log(et);
});

When I check out Chrome's network monitor I see the response:

HTTP/1.1 200 OK
Date: Sun, 06 Oct 2013 19:06:26 GMT
Content-Type: application/json
Transfer-Encoding: chunked
Connection: keep-alive
Vary: Accept-Encoding
Server: gunicorn/18.0
Set-Cookie: session=eyJkaXNjb3Zlcl9maXJzdF90aW1lIjpmYWxzZX0.BTNGMg.eF89vHEeIpLH8sZiJOwCAJEjPhA; HttpOnly; Path=/
Content-Encoding: gzip

But I am seeing the error method fire, never the success :(

Is this simply because the server does not support JSONP? How do you access the data of these APIs if they don't support JSONP but they support JSON?

Found a nice solution:

Just in case anyone comes across this and like me am using EXPRESS, you create create a simple little API on your server using this:

https://npmjs.org/package/request

Here I don't need to spin up a whole proxy server, but you can request the JSON data from your server.

you didn't define JSON_CALLBACK so probably this is the root of error — lukaleli, Oct 06 '13 at 19:03
Angular handles the JSON_CALLBACK function. -> http://docs.angularjs.org/api/ng.$http#jsonp — TyMayn, Oct 06 '13 at 19:04
What's the response body? If the server does not support JSONP, and you don't have access to change it, you will need to use a proxy. — Bergi, Oct 06 '13 at 19:04
possible duplicate of [Ways to circumvent the same-origin policy](http://stackoverflow.com/questions/3076414/ways-to-circumvent-the-same-origin-policy) — Bergi, Oct 06 '13 at 19:05

score 1 · Accepted Answer · answered Oct 06 '13 at 19:09

1

Only problem here is that site doesn't even declare JSONP support.

How do you access the data of these APIs if they don't support JSONP but they support JSON?

Write your proxy layer on backend.

answered Oct 06 '13 at 19:09

OZ_

12,492
7
50
68

Ok, thanks for clarifying. I was not 100% sure if the site had to be configured to accept JSONP. As my backend in this case is NODE/EXPRESS I will look into how to to write a proxy layer. Thanks for your insight. – TyMayn Oct 06 '13 at 19:16
if the external site is not configured for jsonp, how would your back end communicate with it ? – eran otzap Jun 18 '15 at 06:08
@eranotzap backend doesn't have same restrictions as browsers have. – OZ_ Jun 18 '15 at 10:02
@OZ are you saying that a node process can perform cross domain requests with out the same limitations ? – eran otzap Jun 18 '15 at 11:36
@eranotzap yes. (any server-side code, not only nodejs). – OZ_ Jun 18 '15 at 13:42
wow that might be a solution for my problem . I've got a javascript client running on my browser which just can't do cross domain calls to a rest api exposed by some site. in the middle where would you still need to add headers to the request ? something like this : http://benbuckman.net/articles/cracking-cross-domain-allow-origin-nut/ – eran otzap Jun 18 '15 at 13:56

score 0 · Answer 2 · answered Oct 06 '13 at 19:08

Try like this:

var url = 'http://www.asterank.com/api/asterank?query={%22e%22:{%22$lt%22:0.1},%22i%22:{%22$lt%22:4},%22a%22:{%22$lt%22:1.5}}&limit=1&callback=json_callback';

$http({method: 'GET', url: url })
                .success(function(data,status,headers,config){
                    console.log(data);
                }).error(function(data,status,headers,config){
                    console.log('API CALL ERROR'+status);
                });
        };

What's the difference between this and jsonp ? – eran otzap Jun 18 '15 at 13:41 — eran otzap, Jun 18 '15 at 13:41

Angular $http.json promise returning error, though I can see the response

Found a nice solution:

2 Answers2