角度2 JSONP注入されたスクリプトは、私がローカルホスト上でアプリケーションを実行していたコールバックエラー

Question

を起動しませんでした：// 3000 NPMサーバーに

Servicesファイル：

import {Injectable} from "@angular/core"; 
import {Jsonp} from "@angular/http"; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class futScoreService{ 
    constructor(private _jsonp:Jsonp){} 
    getCompetitions(){ 

    let queryString ='?callback=JSONP_CALLBACK'; 
    return this._jsonp.get('http://api.football-data.org/v1/competitions/' + queryString,{method: 'Get'}) 
     .map((res) => res.json()); 
    } 
} 

コンポーネントファイル：

ngOnInit(){ 
     this._futScoreService.getCompetitions().subscribe(
     (comp)=>{ 
      console.log(comp); 
     }, 
     (err)=>{ 
      console.log(err); 
     } 
    ); 
    } 

コンソールでこのエラーが発生していますconsole-error とネットワークタブでは、私はAPIからオブジェクトを取得しますnetwork-tab

Answer 1

解決策は、HTTPモジュールで要求を取得し、get要求でヘッダーを提供していました。ヘッダー部分が失敗した主な理由でした。

let headers = new Headers({'X-Mashape-Key':'Ns0SkjyRRomshq3PgEnGoz2Zkc71p1CYnWajsnphGctvrGt46W'}); 
    headers.append('Accept', 'application/json'); 
     return this._http.get("http://api.football-data.org/v1/competitions/",{ 
     headers: headers 
     }) 
     .map((res) => res.json()); 

Answer 2

角度は __ng_jsonp____req0_finished でJSONP_CALLBACKを交換しているが、それは __ng_jsonp__.__req0.finished

ネットワークの応答を点検する必要があります。 __ng_jsonp____req0_finished({...json object...})が表示された場合は、これが問題です。

一部のサービスでは、コールバッククエリ文字列パラメータの要件が異なります。これは、エラーがまったく同じであるため厄介であることがわかります。私は&callback=__ng_jsonp__.__req0.finishedとMailChimpを使って同じエラーを生成しましたが、応答にはjsonオブジェクトとコールバック関数しかありませんでした。角度は、各コールの状態を持続するように、あなたが行われたコールの数を考慮する必要があります。MailChimpのスペックは、JSONPコールバック（JSONP_CALLBACK問題RE）をハードコーディングするときに代わりに&callback=

の&c=を使用することがあるためです。 Mailchimpのための私の例：

addEmailToList(email: string, listId: string, jsonpCalls: number, callback: any) { 

const cbJsonp = '__ng_jsonp__.__req' + jsonpCalls + '.finished'; 

let url = [ 
     'http://', 
     host, 
     '/subscribe', 
     '/post-json', 
    ].join(''); 

let queryParams: URLSearchParams = new URLSearchParams(); 
queryParams.set('u', Config.MAILCHIMP_API_KEY); 
queryParams.set('id', listId); 
queryParams.set('EMAIL', email); 
queryParams.set('c', cbJsonp); // non-standard; varies by service; usually 'callback' 
... 
} 

Answer 3

this._InstUrl = "your url"; 

let params1 = new URLSearchParams(); 
//params.set('search', term); // the user's search value 
//params.set('action', 'opensearch'); 
params1.set('format', 'json'); 
//params1.set('callback', "ng_jsonp.__req0.finished"); 
params1.set('callback', "JSONP_CALLBACK"); 

    return this._jsonp 
     .get(this._InstUrl, { search: params1 }) 
     .map(response => { debugger; this.Result = response.json().data }) 
     .subscribe(
     (data) => { 
      debugger 
      console.log(this.Result); 
     }, 
     (error) => { 
      debugger 
      console.log(error); 
     });