S3 не возвращает заголовки Access-Control-Allow-Origin?

У меня возникли проблемы с тем, что S3 задает заголовки CORS для всех объектов, которые он возвращает из ведра, хотя CORS включен, поскольку загрузка S3 на стороне клиента работает, возвращенные объекты не имеют заголовков CORS!

Включенная политика:

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

Пример URL объекта https://s3.amazonaws.com/captionable/meme/test

Кто-нибудь знает, что не так?

Ответ 1

Прежде всего, убедитесь, что заголовок Origin с каждым запросом. Если не отправлен заголовок Origin, S3 не отправит заголовки access-control, поскольку S3 считает их несущественными (и, как правило, они есть). Браузер (для которого подразумевается механизм CORS) автоматически отправляет заголовок Origin при выполнении кросс-начальных HTTP-запросов через XMLHTTPRequest.

В случае загрузки изображений с помощью img вам нужно добавить атрибут crossorigin="anonymous". Видеть Документация MDN по атрибуту crossorigin. Это приведет к тому, что браузер отправит заголовок запроса Origin, как это делается с XMLHTTPRequest.

Следуя ответом Сэма Селикова, вам может потребоваться изменить

 <AllowedOrigin>http://*</AllowedOrigin>

к

 <AllowedOrigin>http://*</AllowedOrigin>
 <AllowedOrigin>https://*</AllowedOrigin>

Я не тестировал это.

Идущий Пол Дрейпер комментирует этот ответ: Следите за проблемами кеширования. Браузер может использовать кешированный ответ, который не включает соответствующие заголовки ответов access-control. Во время разработки вы можете очистить кеш. В процессе производства вы должны перейти на новый URL-адрес ресурса, если раньше он использовался статическим образом.

Ответ 2

Я также столкнулся с этим тегом <image>, и после ответа Myrne Stol я добавил тег crossorigin=anonymous в свой тег изображения. Я проверил, что заголовок Origin действительно отправляется на S3, но все же заголовок Access-Control-Allow-Origin не был отправлен в ответ.

Я наткнулся на этот SO ответ и решил. Я изменил AllowedOrigin в моей конфигурации S3 так:

<AllowedOrigin>http://*</AllowedOrigin>
<AllowedOrigin>https://*</AllowedOrigin>

и теперь S3 отвечает заголовками доступа. Ура!