Настройка Access-Control-Allow-Origin в Cloudfront

15

У меня проблемы с обслуживанием статических ресурсов в Firefox с помощью AWS Cloudfront.

Chrome отлично работает, но Firefox возвращает ошибку CORS.

Если я выполню curl, я получу:

HTTP/1.1 200 OK
Content-Type: application/x-font-opentype
Content-Length: 39420
Connection: keep-alive
Date: Mon, 11 Aug 2014 21:53:50 GMT
Cache-Control: public, max-age=31557600
Expires: Sun, 09 Aug 2015 01:28:02 GMT
Last-Modified: Fri, 08 Aug 2014 19:28:05 GMT
ETag: "9df744bdf9372cf4cff87bb3e2d68fc8"
Accept-Ranges: bytes
Server: AmazonS3
Age: 2743
X-Cache: Hit from cloudfront
Via: 1.1 c445b20dfbf3128d810e975e5d84e2cd.cloudfront.net (CloudFront)
X-Amz-Cf-Id: ...

Который, я думаю, нуждается в заголовке:

Access-Control-Allow-Origin: *

Может кто-нибудь мне помочь? Почему это проблема в Firefox, а не в Chrome? Как я могу решить это?

Тони
источник

Ответы:

18

Прежде всего, вам нужно убедиться, что у вас есть белый заголовок происхождения:

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

http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/RequestAndResponseBehaviorCustomOrigin.html#request-custom-cors

Также смотрите: http://aws.amazon.com/blogs/aws/enhanced-cloudfront-customization/

Кстати, есть несколько похожих вопросов по serverfault / stackoverflow и много ответов.

bjunix
источник
4

Это немного сложнее, чем указывает принятый ответ.

Поддержка CORS при использовании Cloudfront + S3 фактически реализована в S3 и работает так в соответствии с Amazon:

Заголовок Origin запроса должен соответствовать элементу AllowedOrigin.

Метод запроса (например, GET или PUT) или заголовок Access-Control Request-Method в случае, если запрос предварительного выбора OPTIONS должен быть одним из элементов AllowedMethod.

Каждый заголовок, указанный в заголовке запроса Access-Control-Request-Headers в запросе предварительной проверки, должен соответствовать элементу AllowedHeader.

Это имеет смысл, но может быть и не ясно, что если клиент не отправляет заголовок Origin, то эта обработка вообще не выполняется. И мы используем Cloudfront впереди, который, если вы просто размещаете статические ресурсы, вы, вероятно, настроили его на игнорирование всех заголовков при кэшировании. Поэтому, если первый запрос к каждому файлу от определенного граничного узла не включает заголовок Origin, он будет кэшировать ответ без заголовка Access-Control-Allow-Origin.

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

Есть несколько способов исправить / обойти это.

  • Настройте облачный фронт для выполнения условного кэширования на основе заголовка «Origin».

Это прекрасно работает, если вы ожидаете только несколько или один источник, но в противном случае ваш коэффициент кэширования может стать очень плохим.

  • Используйте Lambda @ edge для принудительной установки заголовков, это можно сделать только один раз для каждого запроса источника (S3).

Полностью гибкий, но добавляет накладные расходы и стоимость.

  • Заставьте cloudfront переопределить заголовок «Origin» для фиктивного значения для каждого запроса.

Это действительно полезно только в случае «Access-Control-Allow-Origin: *», и это немного хакерское решение, но, вероятно, это лучшее из существующих решений при размещении статических ресурсов в cloudfront + S3.

Расмус Ларсен
источник