Настройка Access-Control-Allow-Origin для кэшированного объекта Cloudfront

Шрифты, обслуживаемые через Cloudfront, не работают в Firefox из-за -allowed">неверный URI или межсайтовый доступ запрещен". Насколько я понимаю, чтобы это исправить, мне нужно установить в заголовке «Access-Control-Allow-Origin» подстановочный знак или исходный домен.

Проблема, с которой я столкнулся, заключается в том, что Cloudfront не принимает заголовки из источника.

Например, ниже приведен список заголовков, которые я получаю, когда пингую свой сервер в поисках шрифта:

curl -I -s "https://mysite.com/wp-content/themes/my-theme/includes/fonts/ProximaNova-Reg-webfont.ttf"
HTTP/1.1 200 OK
Server: nginx
Date: Wed, 29 Jan 2014 16:03:03 GMT
Content-Type: application/x-font-ttf
Content-Length: 44992
Last-Modified: Tue, 28 Jan 2014 22:21:41 GMT
Connection: keep-alive
ETag: "52e82d75-afc0"
Expires: Thu, 29 Jan 2015 16:03:03 GMT
Cache-Control: max-age=31536000
Access-Control-Allow-Origin: https://mysite.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3600
Accept-Ranges: bytes

С этим ответом все выглядит хорошо; однако, когда я пингую Cloudfront для того же ресурса, я получаю:

curl -I -s "https://ds6dj5kp03o39.cloudfront.net/wp-content/themes/my-theme/includes/fonts/ProximaNova-Reg-webfont.ttf"
HTTP/1.1 200 OK
Content-Type: text/plain
Content-Length: 44992
Connection: keep-alive
Date: Wed, 29 Jan 2014 16:22:30 GMT
Server: Apache/2.2.16 (Debian) mod_ssl/2.2.16 OpenSSL/0.9.8o
Last-Modified: Wed, 22 Jan 2014 02:44:45 GMT
ETag: "5d633-afc0-4f0861b87a140"
Accept-Ranges: bytes
Cache-Control: max-age=3600
Expires: Wed, 29 Jan 2014 17:22:30 GMT
X-Cache: Miss from cloudfront
Via: 1.1 850e11212c3f83bfb138469e9b3b7718.cloudfront.net (CloudFront)
X-Amz-Cf-Id: M4qkj9FwjdAUW91U4WeZzxEI0m7vOmiQvryS55WwoeU5Ks11IC71ig==

Кажется, что все заголовки источника полностью игнорируются. У меня вопрос: как заставить Cloudfront принимать заголовки моих активов, особенно критический заголовок «Access-Control-Allow-Origin»?

Спасибо за помощь!


cors cdn amazon-cloudfront
person tollmanz    schedule 29.01.2014    source источник
comment
Эй, я до сих пор не понимаю, как на связанный вопрос отвечает: установить заголовки на вашем сервере. Я думаю, вам нужно установить заголовки на сервере, к которому вы подключаетесь. Хорошо, что нельзя отрицать комментарии, потому что я, должно быть, здесь полный идиот.   -  person loveNoHate    schedule 29.01.2014
comment
Да... это может быть и моей проблемой ;) Я думаю, что должно произойти, так это то, что некоторые из заголовков, которые вы устанавливаете на своем сервере, сохраняются CloudFront. Они, очевидно, отменят некоторые из них, но я думал, что некоторые из них сохранятся. Многие люди писали статьи об этом методе, но у меня он не работает. Возможно, это предположение просто ошибочно.   -  person tollmanz    schedule 29.01.2014
comment
Это работает: docs.aws.amazon.com/AmazonS3/latest/ dev/cors.html ?   -  person loveNoHate    schedule 30.01.2014

Ответы (4)


arrow_upward
17
arrow_downward

Если вы придете к этому позже и у вас возникнет проблема с пользовательским источником, который уже правильно обслуживает заголовок Access-Control-Allow-Origin, вот две вещи, которые я проверил/попробовал:

  1. Проверьте, есть ли в конфигурации вашего nginx или apache * в кавычках, если да, попробуйте удалить их.
  2. Убедитесь, что вы передаете правильные типы контента для файлов woff и ttf. Это была самая быстрая ссылка, которую я нашел по этому вопросу — https://github.com/fontello/fontello/wiki/How-to-setup-server-to-serve-fonts

Апач

Чтобы установить правильные типы mime для файлов шрифтов, добавьте следующие строки в конфигурацию:

AddType application/vnd.ms-fontobject    .eot
AddType application/x-font-ttf           .ttf
AddType application/font-woff            .woff

Если вы не можете редактировать конфиг, создайте .htaccess файл в папке с вашим проектом и добавьте туда строчки.

Для заголовков CORS добавьте следующий код:

<FilesMatch ".(eot|ttf|otf|woff)">
  Header set Access-Control-Allow-Origin "*"
</FilesMatch>

Вам нужно будет запустить service apache2 restart после внесения этих изменений, и если вы получите сообщение об ошибке Invalid command 'Header', это означает, что вы не включили модуль mod_header в Apache, что вы можете сделать с помощью a2enmod headers

nginx

По умолчанию nginx не имеет типов mime по умолчанию для шрифтов и неправильного типа mime для .eot файлов. Добрался до папки с конфигами и нашел, где дефилируются мим-типы. Обычно это находится в файле mimes.conf.

Найдите .eot и напишите вместе с ним. Добавьте строки ниже:

application/vnd.ms-fontobject    eot;
application/x-font-ttf           ttf;
application/font-woff            woff;

Для заголовков CORS добавьте что-то подобное в конфигурацию vhost.

location ~* \.(eot|ttf|woff)$ {
    add_header Access-Control-Allow-Origin *;
}
person streetlogics    schedule 30.07.2014

arrow_upward
7
arrow_downward

В конфигурации по умолчанию CloudFront не проверяет заголовки и не кэширует их значения. Вероятным виновником для вас является то, что ваш ресурс сначала запрашивается без заголовка «Origin», и, следовательно, S3 не обслуживает заголовки CORS в ответ. Ответ кэшируется, и когда вы позже делаете запрос из другого источника, кэшированный ответ обслуживается без них.

Вы можете настроить CloudFront для пересылки заголовка Origin в S3 и кэширования разных ответов для разных значений заголовков, что приведет к тому, что CloudFront при необходимости будет кэшировать заголовки CORS. См. http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/header-caching.html#header-caching-web-cors.

person Alex North    schedule 24.11.2014

arrow_upward
6
arrow_downward

Вы сделали правильно, но CloudFront кэширует результаты, поэтому вы получаете старую кешированную версию. Вы можете увидеть это в заголовках: с вашего сайта:

Последнее изменение: Вт, 28 января 2014 г., 22:21:41 по Гринвичу

из облака:

Последнее изменение: среда, 22 января 2014 г., 02:44:45 по Гринвичу

Теперь, как заставить его работать снова:

а) дождитесь истечения срока действия объекта, затем запросите его снова. Затем CloudFront обновит его.

b) Признайте недействительным объект(ы), используя консоль amazon aws > cloudfront > дистрибутив > Invalidations. См. http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Invalidation.html для получения подробной информации о том, как использовать это

c) измените имя или начните использовать имя версии для файла, например. ProximaNova-Reg-webfont_2.ttf

person Paulo Cunha    schedule 17.03.2014
comment
Я сходил с ума по этому поводу. В S3 для заголовка Access-Control-Allow-Origin установлено значение *, а через облачный запрос этот заголовок не был установлен. Прочитав это, я загрузил новый файл, и теперь у него установлен заголовок :) имеет смысл. Спасибо! - person mwm; 23.01.2015

arrow_upward
3
arrow_downward

Для ваших сегментов существует явная конфигурация для динамической оценки заголовков CoRS.

  1. См. документацию AWS CORS.
  2. Также подробное объяснение их использования.

Попытка установить заголовки CORS или иным образом для CF или S3 будет отклонена, поскольку это нарушит их модель кэширования.

person Joseph Lust    schedule 17.08.2014