Skip to main content
Skip to content

CORS と JSONP を使用してクロスオリジン要求を行う

クロスオリジン リソース共有 (CORS) と JSONP コールバックを使用して、ドメイン間で API 要求を行うことができます。

クロスオリジンリクエストについて

クロスオリジン要求は、要求の送信元とは異なるドメインに対して行われた要求です。 セキュリティ上の理由から、ほとんどの 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