質問: 現在こちらのページのtag1216様のプログラムを参考にはてなブックマークの新着記事のタグを収集し、同じようにForceレイアウトで表示し、ノードに記事へのリンクをつけたいと考えています。 しかしはてなブックマークのAPIを利用しようとするとクロスオリジン要求をブロックされqiitaのAPIと同じようにすることができません。 これはqiitaのAPIがJSONPとしてレスポンスを返すためクロスドメインにひっかからないのでしょうか? 仮にJSONPの場合制約にかからないのでしょうか? その場合はてなブックマークのAPIでJSONPで返すにはどのようにすればよいでしょうか? 無知の質問が多く申し訳ありません。お力添えよろしくお願いします。
回答: JSONP は外部スクリプトとして読み込める形にした JSON のことで、通常の JSON とは形式が異なります。そのため API 提供側での対応が必要ですが、 Qiita も~~はてなブックマークも~~対応していません。 追記:はてなブックマークの当該APIは callback パラメータを付加することで JSONP で取得できるようです(mjyさんの回答参照)。 前述のデモサイトでの Qiita からのレスポンスには以下のヘッダが存在します。 ``` Access-Control-Allow-Credentials: true Access-Control-Allow-Methods: GET, POST, PUT, DELETE Access-Control-Allow-Origin: http://bl.ocks.org Access-Control-Expose-Headers: Access-Control-Max-Age: 1728000 ``` これは CORS (Cross-Origin Resource Sharing) で定められた、アクセス制御のために用いられるヘッダ群です。d3.js を含め Ajax 通信に用いられる XMLHttpRequest には Same-Origin Policy というルールが適用され、基本的に異なるオリジン間での通信は行えないのですが、これらのヘッダ群で許可されていた場合に限り通信が許可されます。ちゃんと `http://bl.ocks.org` が許可されていますね。 一方はてなブックマークのAPIではこれらのヘッダが出力されないため、「別オリジンからの要求を全て拒否した」ものとしてブラウザが解釈し、通信をブロックします。 その他参考記事など * HTTP access control (CORS) | MDN * CORS(Cross-Origin Resource Sharing)について整理してみた | Developers.IO * JavaScriptプログラミング講座【クロスオリジンリソースシェアリングについて(CORS)】