Использование CORS и JSONP для выполнения запросов между источниками

Вы можете выполнять запросы API между доменами с помощью общего доступа к ресурсам (CORS) и обратного вызова JSONP.

В этой статье

Сведения о запросах между источниками

Запрос между источниками — это запрос, сделанный в другой домен, отличный от исходного запроса. По соображениям безопасности большинство веб-браузеров блокируют запросы между источниками. Однако для выполнения запросов между источниками можно использовать совместное использование ресурсов (CORS) и обратных вызовов JSONP.

Общий доступ к ресурсам независимо от источника (CORS)

REST API поддерживает общий доступ к ресурсам между источниками (CORS) для запросов AJAX из любого источника. Дополнительные сведения см. в разделе "Рекомендация 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 на веб-страницах и избежать проблем между доменами. Ответ включает те же выходные данные, что и при обычном вызове 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"
      }
    ]
  ]
}