web-dev-qa-db-ja.com

AngularjsJSONPが機能しない

ここで何かが足りないかもしれませんが、このJSONPリクエストを機能させることができません。コードは次のとおりです。

var url =  'http://' + server + '?callback=JSON_CALLBACK';
$http.jsonp(url)
    .success(function(data){
       console.log('success');
    })
    .error(function () {
      console.log('error')
    });

リクエストは正常に起動し、次の形式でレスポンス（ヘッダーContent-Type：application/jsonを含む）を取得しています。

    [{"id": "1", "name": "John Doe"},
     {"id": "2", "name": "Lorem ipsum"},
     {"id": "3", "name": "Lorem ipsum"}]

何かおかしいことがわかりますか？サーバーから返すべき形式が正しくないのではないでしょうか。 Angularは、設定したもの（ 'error'）以外のエラーメッセージなしでエラーコールバックを起動します。

angularjsjsonp
10
Bertrand

[〜＃〜] jsonp [〜＃〜] データをJavaScript関数呼び出しにラップする必要があります。したがって、技術的には、JsonファイルではなくJavaScriptファイルを返します。

サーバーから返されるデータは次のようになります。

// the name should match the one you add to the url
JSON_CALLBACK([
    {"id": "1", "name": "John Doe"},
    {"id": "2", "name": "Lorem ipsum"},
    {"id": "3", "name": "Lorem ipsum"}
]);

編集：AngularのJSONPの問題に遭遇した場合は、 この質問に対するこの回答 も読んでください。役立つ情報が含まれています。 angularが実際のコールバック関数を処理する方法について。

16
TheHippo

@TheHippoは正しいですが、データは単なるjson応答ではありません。 これが実際の例です AngularJSのYouTubeエンドポイントに対するJSONPリクエストの。

この例で注意すべき点がいくつかあります。

  • Angularの $ http.jsonp リクエストクエリ文字列パラメータをcallback=JSON_CALLBACKからcallback=angular.callbacks._0に変換します。
  • YouTubeエンドポイントを呼び出すときに、クエリ文字列でalt=json-in-scriptの代わりにalt=jsonを使用して、これがJSONPリクエストであることをサービスに指定する必要がありました。これは彼らの ドキュメント。 で見つかりました
  • this url と this one の結果を比較して、ブラウザーでのJSONとJSONPの応答の違いを確認します。
  • 開発ツールの Chromeネットワークパネル を見て、リクエスト/レスポンスとの比較とトラブルシューティングに役立ててください。

私はこの例が非常に具体的であることを知っていますが、うまくいけばそれが役立つでしょう！

30
Gloopy