CORS. Коротко о кросс-доменных запросах GET, POST, DELETE etc.

В наши дни не знать что такое CORS, сродни прогулки тёмной ночью по последнему этажу, недостроенной высотки где-нибудь за городом, в неблагополучном районе... Т.е. смерти подобно, а особенно если вы "Frontend" разработчик.

CORS это набор HTTP заголовков, которые позволяют объяснить браузеру и серверу, что они хоть и из разных доменов, но одной крови работать могут вместе, т.е. поддерживаются кросс-доменные запросы. Еще совсем недавно запрос из браузера посредством старого, доброго JavaScript, без "костылей" было невозможно сделать, но эти мрачные времена канули в лету. Пришёл на помощь CORS.

В данной статье речь пойдет именно о процессе использования и базовой настройки заголовков сервера, и отправке запросов клиента с использованием jQuery.

Сервер, который хочет предоставить поддержку кросс-доменных запросов должен клиенту сообщить об этом, отправив следующие заголовки:

• Access-Control-Allow-Origin
• Access-Control-Allow-Methods
• Access-Control-Allow-Headers

Это тот минимум, который необходим для успешной работы наших кросс-доменных запросов.

Access-Control-Allow-Origin — (обязательный) собственно список, разделенный пробелами допустимых доменов (источников), которые будут делать запросы к нам на сервер. Особенности: регистрозависим, поддерживает маски, например, http://api.superservice.com/, http://*.superservice.com/. Этот заголовок будет сравниваться с заголовком Origin клиентского запроса.

Access-Control-Allow-Method — (обязательный) это список доступных HTTP методов, разделенных запятыми. Особое внимание стоит уделить тому, что "звездочка" (*) работать не будет!

Access-Control-Allow-Headers — (обязательный вместе с Access-Control-Request-Headers) список через запятую заголовков разрешенных в запросе.

Пример настройки для Apache:

# CORS заголовки (добавте это, например, в .htaccess)
  < ifmodule mod_headers.c >
    Header always set Access-Control-Allow-Origin: "*"
    Header always set Access-Control-Allow-Methods "POST, GET, PUT, DELETE, OPTIONS"
    Header always set Access-Control-Allow-Headers "X-Requested-With, content-type"
  < /ifmodule >

Теперь, предположим, что сервис у нас крутится по адресу http://api.superservice.com/ , а GET запрос нам надо сделать со странички http://pure.client.net/. Это не сложно сделать, к примеру с jQuery:

jQuery.ajax({
  url: 'http://api.superservice.com/credit-card-ids',
  type: 'GET',
  contentType: 'application/json', // тип контента, который будете получать
  headers: { }, // нестандартные заголовки, укажите их в Access-Control-Allow-Headers
  success: function (res) {
  	console.log(res);
  },
  error: function () { ... }
});

@Дмитрий Тайнов

Смотрите также: