Что такое CORS и как его использовать

1

Введение

API-интерфейсы — это нитки, которые позволяют сшивать богатый веб-интерфейс. Но этот опыт трудно перевести в браузер, где варианты междоменных запросов ограничены такими методами, как JSON-P (который ограничен из-за проблем с безопасностью) или настройкой настраиваемого прокси (что может быть больно для настройки и обслуживания).

Совместное использование ресурсов (CORS) — это спецификация W3C, которая позволяет осуществлять междоменную связь в браузере. Создавая поверх объекта XMLHttpRequest, CORS позволяет разработчикам работать с одинаковыми идиомами как запросы с одним доменом.

Вариант использования для CORS прост. Представьте, что на сайте alice.com есть некоторые данные, которые сайт bob.com хочет получить. Этот тип запроса традиционно не допускается в соответствии с той же политикой происхождения браузера. Однако, поддерживая запросы CORS, alice.com может добавить несколько специальных заголовков ответов, которые позволяют bob.com получать доступ к данным.

Как видно из этого примера, поддержка CORS требует координации между сервером и клиентом. К счастью, если вы являетесь разработчиком на стороне клиента, вы защищены от большинства этих деталей. В остальной части этой статьи показано, как клиенты могут выполнять запросы с кросс-началом и как серверы могут настраивать себя для поддержки CORS.

2

Выполнение запроса CORS

В этом разделе показано, как сделать кросс-доменный запрос в JavaScript.

Создание объекта XMLHttpRequest

CORS поддерживается в следующих браузерах:

  • Chrome 3+
  • Firefox 3.5+
  • Opera 12+
  • Safari 4+
  • Internet Explorer 8+

Чтобы начать работу, сначала необходимо создать соответствующий объект запроса. Николай Закас написал простой вспомогательный метод, чтобы помочь разобраться в различиях браузера:

Обработчики событий

У исходного объекта XMLHttpRequest был только один обработчик событий onreadystatechange, который обрабатывал все ответы. Хотя onreadystatechange все еще доступен, XMLHttpRequest2 представляет собой набор новых обработчиков событий. Вот полный список:

Обработчик события Описание
onloadstart* Когда запрос начнется
onprogress При загрузке и отправке данных
onabort* Когда запрос был прерван. Например, вызывая метод abort ()
onerror Когда запрос не выполнен
onload Когда запрос успешно завершен
ontimeout Когда тайм-аут вышел до завершения запроса
onloadend* Когда запрос завершен (либо с успехом, либо с ошибкой)

* отмеченные элементы не поддерживаются IE XDomainRequest
источник: http://www.w3.org/TR/XMLHttpRequest2/#events

В большинстве случаев вы, по крайней мере, хотите обрабатывать события onload и onerror:

Браузеры не очень хорошо сообщают, что случилось с ошибкой. Например, Firefox сообщает о статусе 0 и пустой statusText для всех ошибок. Браузеры также сообщают сообщение об ошибке в журнал консоли, но это сообщение недоступно из JavaScript. При возникновении, вы будете знать, что произошла ошибка, но не больше.

withCredentials

Стандартные запросы CORS не отправляют и не устанавливают файлы cookie по умолчанию. Чтобы включить куки-файлы в качестве части запроса, вам необходимо установить для свойства XMLHttpRequest .withCredentials значение true:

xhr.withCredentials = true;

Чтобы это работало, сервер должен также включить учетные данные, установив для заголовка ответа Access-Control-Allow-Credentials значение «true». Подробнее см. В разделе «Сервер».

Access-Control-Allow-Credentials: true

Свойство .withCredentials будет включать в себя любые файлы cookie из удаленного домена в запросе, а также будет устанавливать любые файлы cookie из удаленного домена. Обратите внимание, что эти файлы cookie по-прежнему соблюдают политики одного и того же происхождения, поэтому ваш код JavaScript не может получить доступ к файлам cookie из файла document.cookie или заголовков ответов. Их можно контролировать только удаленным доменом.

3

Выполнение запроса

Теперь, когда ваш запрос CORS настроен, вы готовы сделать запрос. Это делается путем вызова метода send()

xhr.send();

Если запрос имеет тело, его можно указать в качестве аргумента для send ().

Вот и все! Предполагая, что сервер настроен правильно для ответа на запросы CORS, ваш обработчик onload начнет реагировать, как и стандартный XHR того же домена, с которым вы так хорошо знакомы.

4

Завершенный пример

Вот полный рабочий образец запроса CORS. Запустите образец и просмотрите сетевые запросы в отладчике браузера, чтобы просмотреть фактический запрос.

Похожие публикации

Комментарии