JSONP call successful, but getting Error: JSONP injected script did not invoke callback

1
votes

I am trying to make a JSONP call to the following API: https://api.openrates.io/latest

My service code:

this.http
    .jsonp<Response>("http://api.openrates.io/latest", "callback")
    .subscribe(res => console.warn(res));

From the DevTools Network Tab I can see that the request was successful and I am getting a JSON object back:

enter image description here

However I get the following exception and I cannot subscribe to the response properly:

enter image description here

Is it a problem in the way I make the JSONP call? Or is the server answer the issue (JSON and not a callback)? For sake of completeness I use Angular 7 and Angular CLI.

3
angularjsonpangular7
From the official website - docs.angularjs.org/api/ng/service/$http#head the second parameter to jsonp is a object. - random

3 Answers

1
votes

Issue is with response type. Its pretty pure json type however jsonp format should looks like - 

/**/ng_jsonp_callback_7({,…});
has_more: false
items: [{new_active_users: 9, total_users: 9580180, badges_per_minute: 5.37, total_badges: 28924187,…}]
quota_max: 300
quota_remaining: 298

So instead of using jsonp you can use get method.

working copy is here https://stackblitz.com/edit/angular-http-jsonp-yd9z1r

0
votes

May be, you should try calling .map with pipeable operator.

return this.http
    .jsonp<Response>("http://api.openrates.io/latest", "callback").pipe(
       map(res=>res),
       tap(res=>console.log(res))
    );

Also check JSON response is valid.

0
votes

Temporarily, if you just need to test your API endpoints locally, you can just run a new session of Chrome where web security is disabled.

You can hit Window + R then execute this script.

chrome.exe --user-data-dir="C://Chrome dev session" --disable-web-security