Приступим
Amazon предоставляет большой выбор веб-сервисов, которые можно подружить друг с другом, тем самым улучшая свой продукт. Сегодня я расскажу про CloudFront и S3, а также о том, как решить проблему с CORS.
Amazon CloudFront — это сервис сети доставки контента (CDN), созданный для высокой производительности, безопасности и удобства разработчиков. Входящие в состав CDN серверы географически располагаются таким образом, чтобы сделать время ответа для пользователей сайта/сервиса минимальным.
Amazon Simple Storage Service (Amazon S3) — это сервис, позволяющий хранить файлы любого типа и объема. Чаще всего его используют для хранения неструктурированных данных: изображений, видео, архивов документов и т. д.
Cross-Origin Resource Sharing (CORS) — технология, которая позволяет предоставить веб-страницам доступ к ресурсам другого домена.
Проблема
У нас есть веб-приложение, в которое мы решили добавить шрифт/картинку/стили — что угодно — и разместили этот файл в своем бакете на S3. Получили ссылку вида cdn.mysite.com, прописали в header, обновили страницу и… увы, ничего не работает.
Access to font at 'https://cdn.mysite.com/assets/font.woff2' from origin 'https://mysite.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Подводные камни
В гугле можно найти много возможных решений, но, к сожалению, по комментариям понимаем, что это работает через раз. Все усложняется устаревшими примерами CORS-политик в формате YAML или интерфейса Amazon.
Обновление занимает от 20 минут до часа, поэтому есть вероятность, что вы не дождетесь обновления, пойдете менять конфиги и в худшем случае сломаете верный конфиг в ходе экспериментов.
Не все браузеры отображают данную ошибку: например, Safari наотрез игнорировал, что что-то не так, а Chrome, наоборот, засыпал консоль красным текстом.
Решаем проблему
Первым делом нужно перейти в консоль Amazon S3, открыть нужный бакет и перейти на вкладку Permissions, спуститься вниз страницы до Cross-origin resource sharing (CORS), нажать кнопку Edit и прописать такой конфиг:
[
{
"AllowedHeaders": [ "*" ], # заголовки, которые разрешено передавать (домены задаются в AllowedOrigins)
"AllowedMethods": [ "HEAD", "GET" ],
"AllowedOrigins": [ "*" ],
"ExposeHeaders": [],
"MaxAgeSeconds": 3000
}
]
Теперь настроим правила для Amazon CloudFront, переходим в консоль, выбираем Distributions, выбираем наш cdn, проваливаемся внутрь, нажимаем на таб Behaviors и редактируем (можно выбрать Default (*)).
