Заголовок 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 header, S3 не будет включать заголовки CORS в ответ. Это действительно бросило меня, потому что я продолжал пытаться свернуть файлы, чтобы проверить CORS, но curl не включает Origin.

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

Не загружайте и не отображайте изображение на странице в 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

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

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

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

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

то, что исправило это для меня, менялось AllowedHeader по умолчанию Authorization to * в конфигурации 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. как предложено Flavio; добавьте конфигурацию CORS на вашем ведре:

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

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

   <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 по умолчанию. Эта конфигурация не на самом деле активным! Вы должны сначала нажать save для активации CORS.

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