S3 CORS, всегда отправлять Vary: Origin

Question

Я использую ведро S3 за Cloudfront с включенным CORS. Если клиент делает запрос с заголовком Origin, тогда S3 (и облачный) отвечают заголовком «Vary: Origin», однако, если запрос выполнен без заголовка Origin, тогда ответ не содержит заголовка Vary.

Это проблематично, потому что я использую ресурс cloudfront/s3 в теге img, и в этом случае браузер делает запрос без заголовка Origin, а затем делает запрос ajax для указанного изображения. Затем браузер использует кэшированную версию изображения без заголовка Access-Control-Allow-Origin и поэтому отклоняет запрос.

Есть ли способ заставить S3 всегда возвращать заголовок «Vary: Origin»?

Answer 1

Другим решением будет настройка вашего дистрибутива CloudFront для автоматического обращения запросов Non-CORS в запросы CORS. Это можно сделать, добавив заголовок CORS для каждого запроса CloudFront отправляет на S3, используя недавно добавленную функцию CloudFront «Заголовки заголовков управления Edge-To-Origin».

Смотрите объявление особенности здесь: https://aws.amazon.com/blogs/aws/cloudfront-update-https-tls-v1-1v1-2-to-the-origin-addmodify-headers/

И документация здесь: http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/forward-custom-headers.html.

Answer 2

Я сделал учетную запись, чтобы ответить на ваш вопрос, потому что существует очень мало хороших ответов для этой проблемы (и нескольких связанных).

Проблема, которую вы описываете, по какой-то причине в первую очередь связана с хром, FF и IE, кажется, достаточно умна, чтобы не делиться кешем между AJAX и обычными вызовами в этих случаях.

Проблема

Давайте сначала описать, почему проблема происходит для будущих читателей:

• Browser (Chrome) запрашивает сервер с помощью обычного <img> или <script> тег. Если сервер находится в том же домене, он не включает заголовки CORS.
• Сервер (S3) возвращает ресурс. Если в запросе отсутствует заголовок Origin, он не присоединяет заголовки CORS в ответе, поскольку они являются избыточными.
• Браузер (Chrome) попробуйте снова получить ресурс, используя AJAX, но на этот раз на самом деле не идет сервер, а просматривает кешированный ресурс.
• Браузер (Chrome) В кеш-версии нет заголовков CORS. Он отклонит запрос как нарушение доступа-разрешения-разрешения-происшествия или другие связанные с этим проблемы.

Раствор

В HTML5 есть атрибут называется crossorigin, который можно добавить в теги, чтобы показать, что они должны передавать информацию происхождения. Возможные значения crossorigin='anonymous' и crossorigin='use-credentials' это совершенно не имеет отношения к вопросу спросил, но, как говорится в документации:

По умолчанию (то есть, когда атрибут не указан), CORS не используется вообще.

https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes

Так просто создать свои метки изображения, как этого <img src='cloundfront.path' crossorigin='use-credentials'>

это так. Это довольно неясно, поэтому я надеюсь, что этот ответ сэкономит время исследований для множества людей.