Заголовок S3-Access-Control-Allow-Origin

У меня была аналогичная проблема с загрузкой веб-шрифтов, когда я нажал на "Добавить конфигурацию 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>HEAD</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration> 

Я просто нажал сохранить, и это сработало, мои пользовательские веб-шрифты загружались в IE и Firefox. Я не эксперт в этом, я просто подумал, что это может помочь вам.

@jordanstephens сказал это в комментарии, но это вроде как теряется и было очень легко исправить для меня.

Я просто добавил метод HEAD и нажал saved, и он начал работать.

<CORSConfiguration>
	<CORSRule>
		<AllowedOrigin>*</AllowedOrigin>
		<AllowedMethod>GET</AllowedMethod>
		<AllowedMethod>HEAD</AllowedMethod> <!-- Add this -->
		<MaxAgeSeconds>3000</MaxAgeSeconds>
		<AllowedHeader>Authorization</AllowedHeader>
	</CORSRule>
</CORSConfiguration>

это простой способ сделать эту работу.

Я знаю, что это старый вопрос, но все еще трудно найти решение.

для начала, это работало для меня на проекте, построенном с Rails 4, Paperclip 4, CamanJS, Heroku и AWS S3.

---

вы должны запросить изображение с помощью

Если ваш запрос не указать Origin заголовок, S3 не будет включать заголовки CORS в ответ. Это действительно бросило меня, потому что я продолжал пытаться свернуть файлы, чтобы проверить CORS, но curl не включает Origin.

смотрите выше ответы. (но у меня тоже была хромированная ошибка)

Не загружайте и не отображайте изображение на странице в CHROME. (если вы собираетесь позже создать новый экземпляр)

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

// there is already an html <img /> on the page, I'm creating a new one now
img = $('<img crossorigin />')[0]
img.onload = function(){
  context.drawImage(img, 0, 0)
  context.getImageData(0,0,w,h)
}
img.src = 'http://s3.amazonaws.com/my/image.png'; // I added arbitrary ?crossorigin to change the URL of this to fix it

Chrome уже кэшировал другую версию и никогда не пытался повторно получить crossorigin версия(даже если я использую crossorigin В открывшемся изображения.

исправить, я добавил ?crossorigin В конце url изображения(но вы можете добавить ?blah, это просто произвольно изменить статус кэша), когда я загрузил его для canvas.. Дайте мне знать, если вы найдете лучшее исправление для CHROME

Я просто добавлю к ответ - выше-что решило мою проблему.

чтобы установить точку распространения AWS / CloudFront в направлении заголовка CORS Origin, щелкните в интерфейсе редактирования точки распространения:

перейдите на вкладку поведения и отредактируйте поведение, изменив заголовки белого списка с None на Whitelist, а затем убедитесь, что Origin добавляется в белый список коробка.

у меня были аналогичные проблемы с загрузкой 3D-моделей из S3 в javascript 3D viewer (3D HOP), но, как ни странно, только с определенными типами файлов (.класс защиты).

то, что исправило это для меня, менялось AllowedHeader по умолчанию Authorization до * в конфигурации CORS:

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

1. установите конфигурацию CORS в настройках разрешений для вас S3 bucket

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

2. S3 добавляет заголовки CORS только тогда, когда http-запрос имеет Origin заголовок.

3. CloudFront не вперед Origin заголовок по умолчанию

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

я исправил это, написав следующее:

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

почему <AllowedHeader>*</AllowedHeader> работает, а <AllowedHeader>Authorization</AllowedHeader> нет?

я попробовал все ответы выше, и ничего не сработало. На самом деле, нам нужно 3 шага сверху ответы вместе, чтобы заставить его работать:

1. как предложил Флавио; добавьте конфигурацию CORS на вашем ведре:

   <CORSConfiguration>
      <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
      </CORSRule>
    </CORSConfiguration>
   

2. на изображении; упоминание crossorigin:

   <img href="abc.jpg" crossorigin="anonymous">
   

3. вы используете CDN? Если все работает нормально, подключаясь к серверу origin, но не через CDN; это означает, что вам нужна какая-то настройка на вашем CDN, например accept CORS заголовки. Точная настройка зависит от того, какой CDN вы используете.

Я пришел к этой теме, и ни одно из вышеперечисленных решений не оказалось применимым к моему случаю. Оказывается, мне просто пришлось удалить косую черту в конфигурации CORS моего ведра.

не удается:

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

игрок:

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

Я надеюсь, что это спасает кого-то какие-то волосы вытягивать.

fwuensche "ответ" - это corret для настройки CDN; делая это, я удалил MaxAgeSeconds.

<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>

в последней консоли управления S3 при нажатии на конфигурацию CORS на вкладке разрешения будет показан пример конфигурации CORS по умолчанию. Эта конфигурация не на самом деле активным! Вы должны сначала нажать кнопку СОХРАНИТЬ, чтобы активировать CORS.

Мне потребовалось слишком много времени, чтобы понять это, надеюсь, это сэкономит кому-то некоторое время.