jQueryのAjaxから外部APIを呼び出したとき。
なぜかこんなエラーが発生・・・
Access to XMLHttpRequest at 'http://express.heartrails.com/api/json?method=getStations&x=139.76608399999998&y=35.681382' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
CORSエラーが出てしまい、APIからJSONが返ってきません。
この解決方法が jsonp を使うこと
ここでは具体的な事例も交え、
jQueryのAjaxから jsonp を設定する方法をまとめます。
Ajaxでjsonpが必要なのはこういう場面
あるとき路線・駅名の地理情報APIを使ってました。
▼ コチラのAPI
緯度と経度指定で最寄りの駅データが調べられる奴です。
次の緯度・経度でデータ取得しようとしたんです。、
- 緯度 ： 35.681382
- 経度 ： 139.766084
試しに書いてみたのが次コード
1 2 3 4 5 6 7 8 9 10 11 | var apiUrl = 'http://express.heartrails.com/api/json' + '?method=getStations&x=139.766084&y=35.681382'; $.ajax({ url: apiUrl, type: 'GET' }) .done(function(data){ $.each(data,function(i, item){ console.log('item : ', item); }); }); |
これで冒頭のエラーが出てしまいました。
いわゆるクロスドメイン（CORS）というやつです。
詳しくは上記事で解説した通り。
ただし外部APIの場合、この記事の解決策は使えません。
外部APIのサーバー側でのヘッダー付与なんてできないので。
そこで該当APIのリファレンスを見直してみます。
すると jsonp というパラメーターを発見
▼ 駅情報取得 API ページより引用
jsonp
string （オプション）
JSON 形式のデータを受け取るためのコールバック関数名
JSON 形式のリクエスト URL にのみ対応
コールバック関数名の指定
これがどうやら必須みたいです。
Ajaxではjsonpでコールバック名を指定できる
そこで jsonp が何なのか・・・
少し調べてみました。
公式によると jsonp は次の役割があるみたいです。
▼ jQuery公式によるjsonpの解説
"jsonp": Loads in a JSON block using JSONP. Adds an extra "?callback=?" to the end of your URL to specify the callback. Disables caching by appending a query string parameter, "_=[TIMESTAMP]", to the URL unless the cache option is set to true.
引用元 ： https://api.jquery.com/jquery.ajax/
▼ この説明の簡単な意訳
"jsonp": JSONPを利用してJSONデータを読み込みする。コールバック名を指定するにはURLの最後に "?callback=?" を付与すればOKです。キャッシュオプションがtrueに設定されていない限り、クエリ文字列パラメーター「_ = [TIMESTAMP]」をURLに追加することにより、キャッシュを無効にします。
Ajax時に dataType: 'jsonp' と渡して使えます。
そしてもう１つ大事なものがあります。
それが jsonpCallback というAjaxオプション
これも公式による説明を引用するとこんな感じ
▼ jQuery公式による jsonpCallback の解説
jsonpCallback
Type: String or Function()
Specify the callback function name for a JSONP request. This value will be used instead of the random name automatically generated by jQuery. It is preferable to let jQuery generate a unique name as it'll make it easier to manage the requests and provide callbacks and error handling. You may want to specify the callback when you want to enable better browser caching of GET requests. As of jQuery 1.5, you can also use a function for this setting, in which case the value of jsonpCallback is set to the return value of that function.
▼ この説明の簡単な意訳
jsonpCallback
データ型: String or Function()
JSONPリクエスト時のコールバック関数名の指定に使える。この値はjQueryによって生成されたランダムな名前の代わりに使われます。...（中略）...jQuery1.5以降より、この設定に function も使えるようになりました。その場合、jsonpCallbackの値はその関数の戻り値に設定されます。
これにコールバック名を渡して使うみたいですね。
実際にjsonp、jsonCallbackを使ってみた
では先ほどのコードでjsonpを使ってみます。
▼ 先ほど紹介した駅データAPI
このAPIでは jsonp パラメーターから、レスポンス（JSON形式）を受け取るためのコールバック関数名を指定できるという話でした。
まともなAPIなら、こういったjsonp向けオプションがあるはずです。
それでは、先ほどのコードをjsonp向けに改造します。
▼ このAPIをjsonpで利用するコード例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var apiUrl = 'http://express.heartrails.com/api/json' + '?method=getStations&x=139.76608399999998&y=35.681382' + '&jsonp=callback'; $.ajax({ url: apiUrl, type: 'GET', dataType: 'jsonp', jsonpCallback: 'callback' }) .done(function(data){ $.each(data,function(i, item){ console.log(item); }); }); |
▼ コンソールの出力結果（JSON化済）
1 | {"station":[{"name":"東京","prefecture":"東京都","line":"JR上野東京ライン","x":139.766103,"y":35.681391,"postal":"1000005","distance":"00m","prev":"上野","next":"新橋"},{"name":"東京","prefecture":"東京都","line":"東北新幹線","x":139.766103,"y":35.681391,"postal":"1000005","distance":"00m","prev":null,"next":"上野"},,... |
うん、今度はちゃんと取得できました。
APIによってはjsonpの指定は大事みたいですね。
そうしないとクロスドメインで弾かれるので。
以上、Ajaxでの jsonp、jsonpCallback の使い方でした。
ではまた ($・・)/~~~
