Что такое CORS и как настроить заголовки?

Что такое CORS?

CORS (Cross Origin Resource Sharing) - технология современных браузеров, которая позволяет предоставить веб-странице доступ к ресурсам другого домена.
Если сайт mydomain.com, обращается к ресурсу сайта mydomain2.com без установки соответствующих CORS заголовков на mydomain2.com, браузер может не выполнить данный запрос с ошибкой "Access has been blocked by CORS policy".

Для использования кросс-доменных запросов, необходимо установить соответствующие заголовки:

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

Какие заголовки и какие значения устанавливать?

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

Типовые значения заголовков, которые можно установить для "расслабленного" режима доступа:

Access-Control-Allow-Origin "*"
Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

если необходимо получать данные авторизации с другого домена, также устанавливаем:

Access-Control-Allow-Credentials: true

Как установить заголовки?

Если обращение происходит к динамическому контенту (например PHP), можно использовать .htaccess:

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

Также можно установить заголовки непосредственно в PHP:

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers", "origin, x-requested-with, content-type");
header("Access-Control-Allow-Methods", "PUT, GET, POST, DELETE, OPTIONS");

Если обращение происходит к статическому контенту, например к .js файлам, заголовки указанные в .htaccess не будут применены, т.к. статические файлы отдает NGINX. В данном случае требуется установить заголовки на уровне конфигурации Web-сервера, это можно сделать только если у вас есть root-доступ к серверу (например как в случае с виртуальным или выделенным сервером). Если вы пользуетесь услугой виртуального хостинга - обратитесь в поддержку для установки нужных заголовков. Для установки CORS заголовков на уровне конфигурации NGINX в сочетании с ISPManager рекомендуем использовать папку vhosts-resources. : /etc/nginx/vhosts-resources/mydomain.com/cors.conf:

proxy_hide_header 'access-control-allow-origin';
proxy_hide_header 'access-control-allow-headers';
proxy_hide_header 'access-control-allow-methods';

add_header 'access-control-allow-origin' '*';
add_header 'access-control-allow-headers' 'origin, x-requested-with, content-type';
add_header 'access-control-allow-methods' 'PUT, GET, POST, DELETE, OPTIONS';

Как проверить, что заголовки установлены верно?

При условии, что использовался один из простых способов установки заголовков (например указанных выше), открываем дебаг-консоль в браузере (F12), вкладка Network. Открываем сайт: http://mydomain.com, проверяем наличие заголовков в отладчике браузера:

Response Headers
access-control-allow-headers: origin, x-requested-with, content-type
access-control-allow-methods: PUT, GET, POST, DELETE, OPTIONS
access-control-allow-origin: *

Дополнительные материалы:

https://ru.wikipedia.org/wiki/Cross-origin_resource_sharing
https://fetch.spec.whatwg.org/
https://developer.mozilla.org/ru/docs/Web/HTTP/CORS