Angular 2 JSONP, injected script did not invoke callback

Question

I'm using Angular 2.RC4 and typescript

I have class with data:

    import {Injectable, Injector, ReflectiveInjector} from '@angular/core';
import {
    Http, Response, Headers, RequestOptions, HTTP_PROVIDERS, Jsonp, JSONP_PROVIDERS,
    URLSearchParams
} from '@angular/http';
import { Observable } from 'rxjs/Observable';
import '../helpers/rxjs-operators';
import { caaConfig } from "../config/cmsaa";

getData(url: string): Observable<any>{
        let params  = new URLSearchParams();
        params.set('callback', 'JSONP_CALLBACK');
        url = this.domain + url;
        let cacheKey = 'cache_caa_http_get_' + url;
        if(this._cache[cacheKey]){
            return this._cache[cacheKey];
        }else{
            let request = this.jsonp.get(url, {search:params}).map(this.extractData).catch(this.handleError);
            this._cache[cacheKey] = request;
            return request;
            }
    }

In all sources: github issues, stackoverflow posts I saw that add callback parameter solve problem. In my case not.

My error is:

JSONP injected script did not invoke callback.

and url

http://example.com/project/invoices/4137?callback=ng_jsonp.__req0.finished

In my bootstrap in included JSON_PROVIDERS.

Someone have idea what I should fix to get data from my remote server?

And what is the response you get to the HTTP request? (I assume that you aren't actually running your service on `domain.com` (please use `example.com` for example domains, that is what it is there for, `domain.com` is a real website.)) — Quentin, Aug 10 '16 at 07:07
When I call in browser answer is JSON. By angular response is: ``` _body: JSONP injected script did not invoke callback. status: 200 ok: true, type: 3 url: http://example.com/project/invoices/4137?callback=__ng_jsonp__.__req0.finished ``` this is error received because I have as error handler return `Observable.throw(error); ` I see this error in console, because in "network" tab in browser this request doesn't exists — jaroApp, Aug 10 '16 at 07:33
That's the problem then. You are getting JSON instead of JSONP. If you are using JSONP then you have to get JSONP from the server as well as handling JSONP on the client. — Quentin, Aug 10 '16 at 07:33
to get JSON should I use JSON_CALLBACK instead JSONP_CALLBACK? I've been tried but still I have same error. I have not editable API on remote server which return JSON — jaroApp, Aug 10 '16 at 07:42
If the remote server is returning JSON then you can't use JSONP. There is no `JSON_CALLBACK` option, the callback in the URL is a feature specific to JSONP. — Quentin, Aug 10 '16 at 07:43
Ok I understand. But what should I do? Because API is on remote server and http doesn't works on this. JSONP wants JSONP as response. When I use http I see as result ``` _body: error, status: 0, ok: false, statusText: "", url: null ``` and in console error: Request has been blocked „Same Origin Policy” not allow remote content from „http://example.com/project/invoices/4137”. (Needed headers CORS „Access-Control-Allow-Origin”) — jaroApp, Aug 10 '16 at 07:50
I "solved" problem by spoke to API owner. Now I can use http because he add this headers to response. Thanks Quentin — jaroApp, Aug 10 '16 at 08:11

Thierry Templier · Answer 1 · 2016-08-10T08:40:08.227

0

Your code assumes that your server application uses the callback parameter in the returned payload. Your server could use another parameter like c.

The content of this parameter is used to generated a response payload like below:

__ng_jsonp__.__req0.finished({ ... })

Otherwise, the callback won't be called within Angular 2 (what you have in your case).

edited Aug 10 '16 at 08:40

answered Aug 10 '16 at 07:21

Thierry Templier

198,364
44
396
360

Angular 2 JSONP, injected script did not invoke callback

1 Answers1