Русский English (US) 简体中文

Статьи в этом разделе

Включить поддержку заголовка CORS

 

Что такое заголовок CORS и для чего он используется? 

Как работает CORS? 

Настройка заголовка Access-Control-Allow-Origin в личном кабинете 

Настройка заголовка Access-Control-Allow-Origin на источнике 

Проверка заголовка CORS 

 

Что такое заголовок CORS и для чего он используется? 

Заголовок ответа Access-Control-Allow-Origin применяется в механизме Cross-Origin Resource Sharing (CORS), чтобы дать возможность браузеру пользователя получать разрешения на доступ к ресурсам домена, отличном от того, с которого поступает запрос. 

Опция «HTTP-заголовок Access-Control-Allow-Origin» передает в ответе браузеру заголовок Access-Control-Allow-Origin и может использоваться:

  • для защиты контента от загрузки на сторонних сайтах.
  • для предотвращения появления ошибки «XMLHttpRequest cannot load http://domain.ru. No’Access-Control-Allow-Origin’ header is present on the requested resource», которая возникает при загрузке веб-шрифтов из кеша CDN-серверов в браузерах по умолчанию (например, Firefox, Internet Explorer).

    __________.pngИсточник: https://answers.microsoft.com/ru-ru/ie/forum/all/%D0%BD%D0%B5%D0%BA%D0%BE%D1%80%D1%80%D0%B5%D0%BA/606122df-a7c4-416d-be37-d40b727ed596   

Как работает CORS?

Например, пользователь, находящийся на сайте http://domain1.com, открывает изображение, которое расположено на вашем сайте по  адресу http://cdn-domain.com/image.jpg. 

В таком случае браузер пользователя отправляет на сервер домена http://cdn-domain.com/image.jpg запрос, например,  вида:

GET /image HTTP/1.1
Host: domain2.com
User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Referer: http://domain1.com/examples/access-control/test.html
Origin: http://domain1.com

В запросе важным является заголовок Origin. Он сообщает серверу, что  запрос отправлен с домена http://domain1.com.

Сервер домена http://cdn-domain.com/image.jpg учитывает заголовок Origin запроса и принимает запрос или отказывает в его обработке.

Если сервер принял запрос, в ответе браузеру будет отправлен заголовок Access-Control-Allow-Origin, который позволит браузеру отобразить изображение для пользователя сайта http://domain1.com.

Важно! Параметры заголовка (в примере ниже: "*") зависят от заданных настроек на сервере. Подробнее об этом и о том, от чего зависит, принял ли сервер запрос или отказал в обработке читайте ниже в инструкции по настройке. 

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2020 00:23:53 GMT
Server: Apache/2.0.61 
Access-Control-Allow-Origin: *
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xml

[XML Data]

Если сервер отказал в обработке запроса, ответ браузеру будет отправлен без заголовка Access-Control-Allow-Origin и браузер не отобразит изображение для пользователя. 

 

Настройка заголовка «Access-Control-Allow-Origin» в личном кабинете

Откройте настройки ресурса.

В списке опций выберите раздел «HTTP-заголовки» и найдите опцию «Поддержка заголовков CORS».

Включите опцию.

_____________.png

В этой опции доступно три варианта настройки заголовка:

1. *, для всех доменов: отображение контента разрешено всем доменам.

________________.png

В таком случае CDN в ответе браузеру передаст заголовок Access-Control-Allow-Origin с параметром "*", и контент будет доступен для просмотра:

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2020 00:23:53 GMT
Server: Apache/2.0.61 
Access-Control-Allow-Origin: *
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xml
 

2. "$http_origin", если источник указан ниже: отображение контента разрешено для тех доменов, которые указаны в поле настройки опции. В заголовке ответа передается домен, с которого пришел запрос:

______________________________.png

При получении запроса CDN сверит значение заголовка запроса Origin с доменами, которые указаны для опции «HTTP-заголовок Access-Control-Allow-Origin».

Если значение заголовка Origin в запросе к серверу соответствует одному из указанных доменов, CDN добавит к ответу заголовок Access-Control-Allow-Origin с доменом, с которого пришел запрос, и контент будет доступен для пользователя.

Если значение заголовка Origin в запросе к серверу не соответствует одному из указанных в личном кабинете доменов, заголовок Access-Control-Allow-Origin добавлен не будет, и контент не отобразится. 

Например, в настройках опции указан домен domain.com:

Screenshot_from_2021-10-05_13-00-09.png

В таком случае, если запрос на ваш контент был отправлен с domain.com, браузер пользователя получит ответ от сервера вида, и контент будет отображен:

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 00:23:53 GMT
Server: Apache/2.0.61 
Access-Control-Allow-Origin: https://domain.com
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xml

Если запрос на ваш контент был отправлен не с домена domain.com заголовок Access-Control-Allow-Origin в ответ браузеру добавлен не будет, и контент отображен не будет. 

3. "$http_origin", для всех доменов: отображение контента разрешено для всех доменов, в заголовке ответа передается домен, с которого пришел запрос.

__________________________.png

Этот вариант опции аналогичен первому варианту, т.к. контент доступен всем доменам, но отличается тем, что в параметре заголовка Access-Control-Allow-Origin будет передаваться домен, с которого был отправлен запрос. 

Так, например, если запрос на ваш контент был отправлен с домена domain.com, он будет передан браузеру в заголовке ответа Access-Control-Allow-Origin, и контент будет отображен:

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 00:23:53 GMT
Server: Apache/2.0.61 
Access-Control-Allow-Origin: https://domain.com
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xml

Такой вариант использования  может быть необходим, например, если для настройки определенных фильтраций на сервере не подходит параметр "*".

Настройки опции будут применены ко всем файлам, передающимся через CDN.

 

Правила  

Настройте заголовок только для определенных файлов, используя «Правила».

Чтобы создать правило, перейдите в раздел «Правила» в настройках ресурса и нажмите «Создать правило» -> «Создать пустое правило».

_______________.png

В настройках правила укажите, к каким файлам необходимо его применять. 

Нажмите на «Добавить опцию» и выберите опцию «Поддержка заголовка CORS» из списка.

________________________.png

Варианты работы правила:

  • Если опция добавлена и активирована, заголовок «Access-Control-Allow-Origin»  добавляется к файлам, указанным в правиле.

______________________.png

  • Если опция добавлена, но не активирована, заголовок «Access-Control-Allow-Origin» не добавляется к файлам, указанным в правиле.

_________________________.png

Настройка заголовка «Access-Control-Allow-Origin» на источнике

Ниже представлены примеры конфигураций для настройки заголовка CORS на источнике. 

HTTP-заголовок «Access-Control-Allow-Origin» со значением «*»   позволяет  отображать  контент с любого домена. 

Конфигурация Apache 

# ---------------------------------------------------------------------- 
# CORS-enabled images (@crossorigin) 
# ---------------------------------------------------------------------- 
# Send CORS headers if browsers request them; enabled by default for images. 
# developer.mozilla.org/en/CORS_Enabled_Image 
# blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html 
# hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/ 
# wiki.mozilla.org/Security/Reviews/crossoriginAttribute 
<IfModule mod_setenvif.c> 
 <IfModule mod_headers.c> 
   # mod_headers, y u no match by Content-Type?! 
   <FilesMatch "\.(gif|png|jpe?g|svg|svgz|ico|webp)$"> 
     SetEnvIf Origin ":" IS_CORS  
     Header set Access-Control-Allow-Origin "*" env=IS_CORS 
   </FilesMatch> 
  </IfModule> 
 </IfModule> 
# ---------------------------------------------------------------------- 
# Webfont access 
# ---------------------------------------------------------------------- 
# Allow access from all domains for webfonts. 
# Alternatively you could only whitelist your 
# subdomains like "subdomain.example.com". 
<IfModule mod_headers.c> 
 <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$"> 
  Header set Access-Control-Allow-Origin "*" 
 </FilesMatch> 
</IfModule>

Конфигурация Nginx 

location ~ \.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$ { 
           add_header Access-Control-Allow-Origin "*"; 
}

Проверка заголовка CORS 

1. Очистите кеш CDN-ресурса или файлов, для которых добавили заголовок. Читать подробнее об очистке кеша. 

2. Воспользуйтесь одним из способов проверки ниже. 

 

Проверка с помощью команды cURL в  терминале (terminal для MacOS; cmd для  WindowsOS) 

1. В терминале пропишите: curl -I http://cdn.example.ru/js/intlTelInput/css/intlTelInput.css   

Где http://cdn.example.ru/js/intlTelInput/css/intlTelInput.css - ссылка на файл, интегрированный с CDN. 

2. Вы получите следующий вывод. Обратите внимание, присутствует ли заголовок  «Access-Control-Allow-Origin»: 

HTTP/1.1 200 OK  
Server: nginx/1.13.1  
Date: Fri, 09 Jun 2017 12:54:24 GMT  
Content-Type: image/jpeg  
Content-Length: 124024  
Connection: keep-alive  
X-Image-Generated: 29  
X-Image-Meta: 1024x768  
X-Image-Read: 71  
Expires: Wed, 06 Dec 2017 12:51:43 GMT  
Cache-Control: max-age=15552000  
Access-Control-Allow-Origin: *  
Last-Modified: Sun, 01 Jan 2017 12:00:00 GMT  
Cache-Control: max-age=315360000, public 
Cache: HIT  
X-Cached-Since: 2017-06-09T12:51:43+00:00
X-ID: m9-up-e245  

3. Если в ответе вы увидели нужный заголовок, заголовок CORS настроен. 

 

Проверка с помощью инструментов разработчика в браузере 

1. Откройте любой интернет-браузер (например, Google Chrome).  

2. Откройте ваш сайт.  

3. Нажмите кнопку F12 (откроется панель разработчика).  

4. Выберите вкладку «Сеть» (Network).  

5. Обновите страницу (клавиша F5).  

6. Вы получите список всех файлов, которые были загружены с вашего сайта.   

7. Найдите необходимый файл  (например: jpeg, png, img), интегрированный с CDN и нажмите на него. Для более удобного поиска можете воспользоваться фильтром в левом углу панели. 

8. На вкладке «Headers» справа вы увидите заголовки, которые настроены на вашем сервере.  

____________________cors.png9. Проанализируйте их, если в ответе вы увидели заголовок «Access-Control-Allow-Origin», заголовок CORS настроен. 

Похожие статьи