Firefox не отображает шрифты от CloudFront

Question

У меня есть Rails приложение, размещенное на Heroku. Во время развертывания активы синхронизируются с ведром Amazon S3 через жемчужину asset_sync, и виды вызывают эти активы через CloudFront. Тем не менее, шрифты не отображаются при просмотре веб-сайта с Firefox (файлы загружаются на вкладку Net Firebug, но просто не используются). Safari отлично работает.

У меня есть следующие CORS конфигурации на S3:

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

Мое приложение также устанавливает следующие заголовки:

Access-Control-Allow-Origin: * 
Access-Control-Request-Method: * 

Но CloudFront возвращает шрифты без них ... Почему Арен `t шрифты загружены? Спасибо заранее.

Answer 1

Try недействительности ваш (кэшированные) файлы шрифтов в CloudFront: http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Invalidation.html#invalidating-objects-console

я сегодня была аналогичная проблема. Я прочитал article, что предлагаемые конфигурации CORS кэшируются в CloudFront. Я разрешил свою проблему, отменив мои файлы шрифтов.

Answer 2

Это то, что выглядит моя конфигурация CORS. У меня есть другой AllowedHeader, чем вы. Я не использую asset_sync.

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

Answer 3

Некоторые версии Internet Explorer и Firefox рассмотреть шрифты вектор атаки и откажет загружать их, если они предоставляются другим доменом (кросс политики домена).

Стандартные HTTP серверы все, что вам нужно сделать, это добавить заголовок Access-Control-Allow-Origin: *, чтобы обойти политику CORS. Проблема S3 не поддерживает отправку. (Хотя в соответствии со спецификацией он должен поддерживать CORS, заголовок не отправляется).

Существует обходное решение. CloudFront можно указать на другом сервере, который может отправлять заголовок Access-Control-Allow-Origin (это можно сделать с сервером, обслуживающим ваше приложение ;)).

Это может быть сделано путем добавления пользовательского происхождения к вашему CloudFront распределения от AWS консоли. Затем вам нужно будет добавить Поведение с вашими типами шрифтов и недавно добавленным Происхождение. Вы можете использовать подстановочные знаки для имени файла. (Вам нужно будет сделать это один раз для каждого типа шрифта, который у вас есть).

Пример:

Path Pattern: /assets/*.woff 

---

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

curl -I http://cloudfrontid.cloudfront.new/assets/font.woff 

Надеюсь, вы увидите заголовок Access-Control-Allow-Origin, предоставленный сервер вместе с файл, кешированный CloudFront с включенным заголовком.

Надеюсь, это поможет!

Answer 4

26 июня 2014 года AWS добавила поддержку CORS в CloudFront, поэтому теперь вы можете сделать эту работу только с CloudFront и S3.

Этот SO ответ предоставляет информацию о возможности поддержки CORS для конкретного распределения CloudFront: https://stackoverflow.com/a/24459590/3195497

Кроме того, вы должны включить CORS на вашем S3 ведро. Один из ответов здесь говорит в отношении S3:

Хотя в соответствии со спецификацией он должен поддерживать CORS, заголовок не отправляется

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

В прошлом это вызвало проблемы с CloudFront. Если вы запросили CloudFront без заголовка запроса Origin, тогда CloudFront будет кэшировать ответ без заголовка ответа Access-Control-Allow-Origin. Это может произойти из-за того, что вы тестируете актив с помощью команды curl, и вы не включаете заголовок запроса Origin. Теперь, когда вы делаете запрос CloudFront с заголовком Origin, CloudFront игнорирует заголовок Origin и обслуживает кешированный ответ без заголовка Access-Control-Allow-Origin.

С изменениями, недавно выпущенными на CloudFront, вы можете настроить свой дистрибутив, чтобы принять во внимание заголовок запроса Origin. В этом случае CloudFront будет кэшировать разные ответы, один ответ для каждого значения заголовка Origin.