AWS: CloudFront и S3 – No ‘Access-Control-Allow-Origin’ header is present on the requested resource

Автор: | 22/01/2019
Нет комментариев

Имеется S3 корзина, к которой подключен CloudFront CDN. (см. AWS: S3 – хостинг статического сайта).

При проверке ресурса на сайте http://inspectstream.theoplayer.com/ получаем ошибку Cross Origin Resource Sharing (CORS) is not enabled:

Полностью ошибка выглядит так:

Access to XMLHttpRequest at ‘https://stage.cdn.example.world/meditation/audio/T/W/TWtEMwG0LuW8R5OlCFR3-X8Y1t-NocSX.m3u8’ from origin ‘https://bitmovin.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Что бы исправить доступ к ресурсам – необходимо настроить CORS-правила на S3, а затем включить передачу заголовков на CloudFront.

Содержание

S3 bucket

Открываем настройки корзины, и во вкладке Permissions => CORS configuration добавляем правило:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>1800</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

CloudFront

Далее – обновляем настройки дистрибьюции CloudFront.

Переходим в Behaviors – Edit, в Cache Based on Selected Request Headers выбираем Whitelist, и добавляем заголовок Origin:

Сохраняем, ждём обновления CDN, когда In Progress сменится на Deployed.

Проверяем:

[simterm]

root@example-ci:~# curl -sI -X GET -H "Origin: http://example.com" https://stage.cdn.example.world/meditation/audio/T/W/TWtEMwG0LuW8R5OlCFR3-X8Y1t-NocSX.m3u8 | grep 'Origin\|Access-Control-Allow'
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET
Vary: Origin

[/simterm]

И через http://inspectstream.theoplayer.com (правда его пришлось открыть в Incognito, т.к. постоянно говорил, что CORS по-прежнему не включены):

Готово.