S3 - Access-Control-Allow-Origin Header

Кому-нибудь удалось добавить Access-Control-Allow-Originв заголовки ответа? Что мне нужно, это что-то вроде этого:

<img src="http://360assets.s3.amazonaws.com/tours/8b16734d-336c-48c7-95c4-3a93fa023a57/1_AU_COM_180212_Areitbahn_Hahnkoplift_Bergstation.tiles/l2_f_0101.jpg" />

Этот запрос get должен содержать в ответе заголовок, 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>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Как и следовало ожидать, Originзаголовок ответа отсутствует .

Обычно все, что вам нужно сделать, это «Добавить конфигурацию CORS» в свойствах вашего сегмента.

<CORSConfiguration>Поставляется со значениями некоторых по умолчанию. Это все, что мне нужно для решения вашей проблемы. Просто нажмите «Сохранить» и попробуйте еще раз, чтобы увидеть, сработало ли это. Если этого не произойдет, вы также можете попробовать приведенный ниже код (из ответа alxrb), который, похоже, работает для большинства людей.

<?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> 

Для получения дополнительной информации вы можете прочитать эту статью о редактировании разрешения на ведро .

У меня была похожая проблема с загрузкой веб-шрифтов, когда я щелкнул «добавить конфигурацию 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. Я не эксперт в этом, я просто подумал, что это может вам помочь.

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

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

Я просто добавил метод HEAD и нажал кнопку «Сохранить», и он начал работать.

<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.

Вы должны запросить свое изображение, используя crossorigin: "anonymous"параметр.

    <img href="your-remote-image.jpg" crossorigin="anonymous"> 

Добавьте URL своего сайта в CORS в AWS S3. Вот ссылка от Amazon об этом. В общем, просто перейдите к своему ведру, а затем выберите « Свойства » на вкладках справа, откройте « Вкладку разрешений », а затем нажмите « Редактировать конфигурацию CORS ».

Изначально я < AllowedOrigin>настроился на *. Просто замените эту звездочку на свой URL, не забудьте включить опции, такие как http://и https://в отдельных строках. Я ожидал, что звездочка принимает «Все», но, очевидно, мы должны быть более конкретными, чем это.

Вот как это выглядит для меня.

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

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

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

// 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, что произвольно изменять состояние кэша), когда я загрузил его для холста. Дайте мне знать, если вы найдете лучшее решение для CHROME

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

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

Перейдите на вкладку поведения и измените поведение, изменив «Кэш на основе выбранных заголовков запроса» с Нет Originна Белый список , а затем убедитесь, что оно добавлено в белый список. Дополнительные сведения см. В разделе « Настройка CloudFront для соблюдения настроек CORS» в Документах AWS.

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

Что установил ее для меня меняется 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>

Подобно тому, как другие имеют состояния, сначала вам нужно иметь конфигурацию CORS в вашем сегменте S3:

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

Но в моем случае после этого он все еще не работал. Я использовал Chrome (вероятно, та же проблема с другими браузерами).

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

После очистки кэша Chrome и перезагрузки страницы изображение получило ожидаемые заголовки CORS.

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

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

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

2. На изображении; упомянуть о перекрестном происхождении:

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

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

Я пришел к этой теме, и ни одно из вышеперечисленных решений не применимо к моему делу. Оказывается, мне просто пришлось удалить косую черту из <AllowedOrigin>URL в конфигурации 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>

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

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

   <?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>нет?

fwuensche "ответ" - это правильно, чтобы создать CDN; Делая это, я удалил MaxAgeSeconds.

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

В последней S3 Management Console, когда вы щелкнете по конфигурации CORS на вкладке Permissions, она покажет пример конфигурации CORS по умолчанию. Однако эта конфигурация на самом деле не активна! Вы должны сначала нажать «Сохранить», чтобы активировать 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>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <ExposeHeader>ETag</ExposeHeader>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Предупреждение - взломать.

Если вы используете S3Image для отображения изображения и впоследствии пытаетесь получить его с помощью функции извлечения, возможно, чтобы вставить его в PDF-файл или выполнить какую-либо другую обработку, предупредите, что Chrome будет кэшировать первый результат, который не требует предварительного запроса CORS, и затем попытайтесь получить тот же ресурс без предварительного запроса OPTIONS для выборки, и произойдет сбой из-за ограничений браузера.

Еще один способ обойти это - убедиться, что S3Image включает в себя crossorigin: «use-credentials», как упомянуто выше. В файле, который вы используете S3Image (у меня есть компонент, который создает кэшированную версию S3Image, так что это идеальное место для меня), переопределите прототип S3Image imageEl, чтобы он включил этот атрибут.

S3Image.prototype.imageEl = function (src, theme) {
    if (!src) {
        return null;
    }
    var selected = this.props.selected;
    var containerStyle = { position: 'relative' };
    return (React.createElement("div", { style: containerStyle, onClick: this.handleClick },
        React.createElement("img", { crossOrigin: 'use-credentials', style: theme.photoImg, src: src, onLoad: this.handleOnLoad, onError: this.handleOnError}),
        React.createElement("div", { style: selected ? theme.overlaySelected : theme.overlay })));
};

403 проблема теперь решена. Какая боль аггрр!

<AllowedOrigin>*</AllowedOrigin>

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

<AllowedOrigin>https://www.example.com</AllowedOrigin>

или если вы хотите включить все возможные субдомены:

<AllowedOrigin>*.example.com</AllowedOrigin>

Ниже приведена конфигурация и у меня нормально работает. Я надеюсь, что это поможет решить вашу проблему на AWS S3.

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

Во-первых, активируйте CORS в своем ведре S3. Используйте этот код в качестве руководства:

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>http://www.example1.com</AllowedOrigin>

   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedMethod>DELETE</AllowedMethod>

   <AllowedHeader>*</AllowedHeader>
 </CORSRule>
 <CORSRule>
   <AllowedOrigin>http://www.example2.com</AllowedOrigin>

   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedMethod>DELETE</AllowedMethod>

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

2) Если он все еще не работает, обязательно добавьте «crossorigin» со значением «*» в теги img. Поместите это в свой HTML-файл:

  let imagenes = document.getElementsByTagName("img");
    for (let i = 0; i < imagenes.length; i++) {
      imagenes[i].setAttribute("crossorigin", "*");

Принятый ответ работает, но кажется, что если вы обращаетесь к ресурсу напрямую, то заголовки перекрестного происхождения отсутствуют. Если вы используете cloudfront, это приведет к тому, что cloudfront будет кэшировать версию без заголовков. Когда вы перейдете на другой URL-адрес, который загружает этот ресурс, вы столкнетесь с проблемой перекрестного источника.

Если ваши настройки CORS вам не помогают.

Проверьте правильность конфигурации S3 . Я имел недопустимое имя ведра Storage.configure. Я использовал короткое имя bucket, и это вызвало ошибку:

В запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin».

Что бы это ни стоило, у меня была похожая проблема - при попытке добавить определенное разрешенное происхождение (не *).

Оказывается, я должен был исправить

<AllowedOrigin>http://mydomain:3000/</AllowedOrigin>

в

<AllowedOrigin>http://mydomain:3000</AllowedOrigin>

(обратите внимание на последнюю ссылку в URL)

Надеюсь, это поможет кому-то