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

06.12.2020
Сложность
3 мин.
11214

Что такое 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


Лучшее решение для размещения ваших сайтов - VPS Hosting



VPS hosting
VPS hosting 1
от 15.25 USD/мес.
VPS hosting 2
от 30.1 USD/мес.
VPS hosting 3
от 46.12 USD/мес.


Были ли сведения полезными?
12 
Продолжая использовать этот сайт и пользуясь нашими услугами, Вы соглашаетесь с Правилами и условиями веб-сайта и использованием файлов cookie на нашем веб-сайте. Также ознакомьтесь с нашей Политикой конфиденциальности, согласно которой, в заявленной степени, Вы соглашаетесь на обработку Ваших персональных данных.