クロスオリジン要求について
クロスオリジン要求は、要求の送信元とは異なるドメインに対して行われた要求です。 セキュリティ上の理由から、ほとんどの Web ブラウザーではクロスオリジン要求がブロックされます。 ただし、クロスオリジン リソース共有 (CORS) と JSONP コールバックを使用して、クロスオリジン要求を行うことができます。
クロスオリジン リソース共有 (CORS)
REST API では、任意のオリジンからの AJAX 要求に対して、クロスオリジン リソース共有 (CORS) がサポートされています。 詳細については、「CORS W3C の推奨事項」と HTML 5 セキュリティ ガイドを参照してください
http://example.com をヒットするブラウザーから送信されたサンプル要求を次に示します。
$ curl -I https://api.github.com -H "Origin: http://example.com" HTTP/2 302 Access-Control-Allow-Origin: * Access-Control-Expose-Headers: ETag, Link, x-ratelimit-limit, x-ratelimit-remaining, x-ratelimit-reset, X-OAuth-Scopes, X-Accepted-OAuth-Scopes, X-Poll-Interval CORS プリフライトリクエストは次のようになります。
$ curl -I https://api.github.com -H "Origin: http://example.com" -X OPTIONS HTTP/2 204 Access-Control-Allow-Origin: * Access-Control-Allow-Headers: Authorization, Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since, X-Requested-With Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE Access-Control-Expose-Headers: ETag, Link, x-ratelimit-limit, x-ratelimit-remaining, x-ratelimit-reset, X-OAuth-Scopes, X-Accepted-OAuth-Scopes, X-Poll-Interval Access-Control-Max-Age: 86400 JSON-P コールバック
?callback パラメーターを任意の GET 呼び出しに送信して、結果を JSON 関数でラップできます。 通常、これが使われるのは、ブラウザーが GitHub のコンテンツを Web ページに埋め込み、クロスドメインの問題を回避しようとする場合です。 応答には、通常の API と同じデータ出力と、関連する HTTP ヘッダー情報が含まれます。
$ curl https://api.github.com?callback=foo > /**/foo({ > "meta": { > "status": 200, > "x-ratelimit-limit": "5000", > "x-ratelimit-remaining": "4966", > "x-ratelimit-reset": "1372700873", > "Link": [ // pagination headers and other links > ["https://api.github.com?page=2", {"rel": "next"}] > ] > }, > "data": { > // the data > } > }) JavaScript ハンドラを記述して、コールバックを処理できます。 以下は、試すことができる最も簡易な例です。
<html> <head> <script type="text/javascript"> function foo(response) { var meta = response.meta; var data = response.data; console.log(meta); console.log(data); } var script = document.createElement('script'); script.src = 'https://api.github.com?callback=foo'; document.getElementsByTagName('head')[0].appendChild(script); </script> </head> <body> <p>Open up your browser's console.</p> </body> </html> すべてのヘッダーは HTTP ヘッダーと同じ文字列値ですが、例外として Link があります。 Link ヘッダーは事前に解析され、[url, options] タプルの配列として渡されます。
たとえば、リンクは次のようになります。
Link: <url1>; rel="next", <url2>; rel="foo"; bar="baz" コールバック出力では次のようになります。
{ "Link": [ [ "url1", { "rel": "next" } ], [ "url2", { "rel": "foo", "bar": "baz" } ] ] }