クロスオリジン要求について
クロスオリジン要求は、要求の送信元とは異なるドメインに対して行われた要求です。 セキュリティ上の理由から、ほとんどの Web ブラウザーではクロスオリジン要求がブロックされます。 ただし、クロスオリジン リソース共有 (CORS) と JSONP コールバックを使用して、クロスオリジン要求を行うことができます。
クロスオリジン リソース共有 (CORS)
REST API では、任意のオリジンからの AJAX 要求に対して、クロスオリジン リソース共有 (CORS) がサポートされています。 詳細については、「CORS W3C の推奨事項」と HTML 5 セキュリティ ガイドを参照してください。
http://example.com
をヒットするブラウザーから送信されたサンプル要求を次に示します。
$ curl -I http(s)://HOSTNAME/api/v3 -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 http(s)://HOSTNAME/api/v3 -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 Enterprise Server のコンテンツを Web ページに埋め込み、クロスドメインの問題を回避する場合に使用されます。 応答には、通常の API と同じデータ出力と、関連する HTTP ヘッダー情報が含まれます。
$ curl http(s)://HOSTNAME/api/v3?callback=foo
> /**/foo({
> "meta": {
> "status": 200,
> "x-ratelimit-limit": "5000",
> "x-ratelimit-remaining": "4966",
> "x-ratelimit-reset": "1372700873",
> "Link": [ // pagination headers and other links
> ["http(s)://HOSTNAME/api/v3?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 = 'http(s)://HOSTNAME/api/v3?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"
}
]
]
}