Hatena::ブログ(Diary)

satosystemsの日記 このページをアンテナに追加 RSSフィード

2014-01-08

[] Ajax クロスドメイン with jQuery

jQuery で Ajax を行うのにあたり、同一ドメインにアクセスする際には問題ないけど、違うドメインにアクセスしようとする場合、何らかの対応が必要になります。

対応方法が3つあるので、簡単にまとめておきます。

ベース実装

まず、今回のエントリのベース実装はこんな感じです。

<html>
<head>
<script src="jquery-2.0.3.min.js"></script>
<script>
$.ajax({
  url: 'http://www.ekidata.jp/api/l/11302.json',
  type: "GET",
  success: function(res) {
    console.log(res);
  }
});
</script>
</head>
<body>
</body>
</html>

これをローカルに任意の名前で保存し(jQuery のダウンロードも忘れずに)、おもむろにダブルクリックすると、以下の様なエラーログがコンソールに表示されます。

XMLHttpRequest cannot load http://www.ekidata.jp/api/l/11302.json.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'null' is therefore not allowed access.

以下はこれを解決しなければいけません、という話です。

ちなみに www.ekidata.jp は、登録不要で駅データが取得できる Web API を提供しているクールなサービスです*1。今回のサンプルは山手線沿線の駅名と位置情報が取得できます。

1. 'Access-Control-Allow-Origin' ヘッダを付与

エラーログに 'Access-Control-Allow-Origin' がありません、という内容が表示されている通り、レスポンスヘッダに Access-Control-Allow-Origin ヘッダがあればクロスドメイン Ajax が可能になります。

API を提供するサーバ側を修正しなければならないため、今回の「駅データ.jp」のような他社のサービスを利用する場合はこの方法は適用できません。

2. JSONP で行う

クライアント側は jQuery で JSONP を使用するように修正します。

$.ajax({
  url: 'http://www.ekidata.jp/api/l/11302.json',
  dataType: 'jsonp', // 追加
  type: "GET",
  success: function(res) {
    console.log(res);
  }
});

ただし、これも API 提供側が JSONP に対応している必要があります。JSONP はサーバとクライアントでコールバックインターフェイスを取り決めておく必要があるのですが、jQuery の場合は 'callback' というパラメータでコールバック関数を渡すため、特に jQuery に対応する場合はこの仕様に従う必要があります。

同様に「駅データ.jp」ではこの方法は利用できません。

3. jquery.xdomainajax.js を利用する

jquery.xdomainajax.js という jQuery プラグインを用いることで、普通に ajax で他ドメインにアクセスできるようになります。

<html>
<head>
<script src="jquery-2.0.3.min.js"></script>
<script src="jquery.xdomainajax.js"></script> <!-- 追加 -->
<script>
$.ajax({
  url: 'http://www.ekidata.jp/api/l/11302.json',
  type: "GET",
  success: function(res) {
    console.log(res);
  }
});
</script>
</head>
<body>
</body>
</html>

これで取得できたデータを見てみます。

{responseText: "<html>  <head>    <meta content="HTML Tidy for Java (vers. 26 Sep 2004), see www.w3.org" name="generator"/>    <title/>  </head>  <body>    <p>if(typeof(xml)=='undefined') xml = {}; xml.data = {"line_cd":11302,"line_name":"JR山手線","line_lon":139.73522275686264,"line_lat":35.69302730762992,"line_zoom":12,"station_l":[{"station_cd":1130201,"station_g_cd":1130201,"station_name":"大崎","lon":139.728439,"lat":35.619772},{"station_cd":1130202,"station_g_cd":1130202,"station_name":"五反田","lon":139.723822,"lat":35.625974},{"station_cd":1130203,"station_g_cd":1130203,"station_name":"目黒","lon":139.715775,"lat":35.633923},{"station_cd":1130204,"station_g_cd":1130204,"station_name":"恵比寿","lon":139.71007,"lat":35.646685},{"station_cd":1130205,"station_g_cd":1130205,"station_name":"渋谷","lon":139.701238,"lat":35.658871},{"station_cd":1130206,"station_g_cd":1130206,"station_name":"原宿","lon":139.702592,"lat":35.670646},{"station_cd":1130207,"station_g_cd":1130207,"station_name":"代々木","lon":139.702042,"lat":35.683061},{"station_cd":1130208,"station_g_cd":1130208,"station_name":"新宿","lon":139.700464,"lat":35.689729},{"station_cd":1130209,"station_g_cd":1130209,"station_name":"新大久保","lon":139.700261,"lat":35.700875},{"station_cd":1130210,"station_g_cd":1130210,"station_name":"高田馬場","lon":139.703715,"lat":35.712677},{"station_cd":1130211,"station_g_cd":1130211,"station_name":"目白","lon":139.706228,"lat":35.720476},{"station_cd":1130212,"station_g_cd":1130212,"station_name":"池袋","lon":139.711086,"lat":35.730256},{"station_cd":1130213,"station_g_cd":1130213,"station_name":"大塚","lon":139.728584,"lat":35.731412},{"station_cd":1130214,"station_g_cd":1130214,"station_name":"巣鴨","lon":139.739303,"lat":35.733445},{"station_cd":1130215,"station_g_cd":1130215,"station_name":"駒込","lon":139.748053,"lat":35.736825},{"station_cd":1130216,"station_g_cd":1130216,"station_name":"田端","lon":139.761229,"lat":35.737781},{"station_cd":1130217,"station_g_cd":1130217,"station_name":"西日暮里","lon":139.766857,"lat":35.731954},{"station_cd":1130218,"station_g_cd":1130218,"station_name":"日暮里","lon":139.771287,"lat":35.727908},{"station_cd":1130219,"station_g_cd":1130219,"station_name":"鶯谷","lon":139.778015,"lat":35.721484},{"station_cd":1130220,"station_g_cd":1130220,"station_name":"上野","lon":139.777043,"lat":35.71379},{"station_cd":1130221,"station_g_cd":1130221,"station_name":"御徒町","lon":139.774727,"lat":35.707282},{"station_cd":1130222,"station_g_cd":1130222,"station_name":"秋葉原","lon":139.773288,"lat":35.698619},{"station_cd":1130223,"station_g_cd":1130223,"station_name":"神田","lon":139.770641,"lat":35.691173},{"station_cd":1130224,"station_g_cd":1130101,"station_name":"東京","lon":139.766103,"lat":35.681391},{"station_cd":1130225,"station_g_cd":1130225,"station_name":"有楽町","lon":139.763806,"lat":35.675441},{"station_cd":1130226,"station_g_cd":1130102,"station_name":"新橋","lon":139.758587,"lat":35.666195},{"station_cd":1130227,"station_g_cd":1130227,"station_name":"浜松町","lon":139.757135,"lat":35.655391},{"station_cd":1130228,"station_g_cd":1130228,"station_name":"田町","lon":139.747575,"lat":35.645736},{"station_cd":1130229,"station_g_cd":1130103,"station_name":"品川","lon":139.738999,"lat":35.62876}]} if(typeof(xml.onload)=='function') xml.onload(xml.data);</p>  </body></html>"}

ということで、取れていることは取れているのですが、なんだか余分な HTML 内にデータがくるまってしまっています*2。ひとつしかない P タグ内である、ということがわかっているので parseXML に通してしまえば良いだけですが、仕様変更が少し怖いですね。

それにしても jquery.xdomainajax.js がどんな仕組みで本来できないはずの Ajax クロスドメインアクセスを実現しているのか、スクリプトを覗いてみました。

Yahoo API を使用して一旦 Yahoo にアクセスさせ、JSONP で結果を取り出しているようだ。世界中のウェブサービスでこのプラグインが使用されたら Yahoo はパンクするんじゃないのかと心配になってしまう。

参考にしたサイト

*1:クールと言いつつダメ出しすると、このサービスで取得するデータは JSON ではなく JavaScript な点、その JavaScript がグローバル領域を汚染してしまう点が残念です

*2:コードを見ると、どうやら Yahoo API の制限っぱい感じ

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト

コメントを書くには、なぞなぞ認証に回答する必要があります。

トラックバック - http://d.hatena.ne.jp/satosystems/20140108/1389173683
リンク元