Настройка доступа-Контроль-Разрешить-Происхождение в кэшированном объекте Cloudfront

Шрифты, поданные через Cloudfront, повреждены в Firefox из-за ошибки неправильного 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

Все выглядит хорошо с этим ответом; однако, когда я ping 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" ?

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

Ответ 1

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

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

Apache

Чтобы установить правильные типы 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 по умолчанию для шрифтов, а неправильная mimy введите для файлов .eot. Получил папку с конфигами и нашел, где mime типы осквернены. Обычно это в файле 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 *;
}

Ответ 2

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

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

Ответ 3

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

Last-Modified: Вт, 28 Янв 2014 22:21:41 GMT

из облачного интерфейса:

Last-Modified: ср, 22 янв 2014 02:44:45 GMT

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

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

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

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

Ответ 4

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

Смотрите Документы AWS CORS
Также подробное объяснение их использования

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