it-swarm.com.ru

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 отсутствует.

135
Wowzaaa

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

Amazon-screen-shot

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

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

136
Flavio Wuensche

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

93
alxrb

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

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

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

34
Senica Gonzalez

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

27
eremzeit

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

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

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


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

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

Добавьте URL своего сайта в CORS в AWS S3. Здесь это ссылка от Amazon об этом. В общем, просто перейдите к своему ведру, а затем выберите «Properties» на вкладках справа, откройте вкладку «Permissions и затем нажмите« Edit CORS Configuration ».

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

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

 enter image description here

27
Horacio

Смотрите выше ответы. (но у меня тоже была ошибка 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

15
Funkodebat

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

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

 enter image description here

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

 enter image description here

14
MikeiLL

У меня были похожие проблемы с загрузкой 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>
8
VME
  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. 

3
Pawel Furmaniak

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

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

2
Pablo García Miranda

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

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

    <CORSConfiguration>
       <CORSRule>
         <AllowedOrigin>*</AllowedOrigin>
         <AllowedMethod>GET</AllowedMethod>
       </CORSRule>
     </CORSConfiguration>
    
  2. На изображении; упомянуть о перекрестном происхождении:

    <img href="abc.jpg" crossorigin="anonymous">
    
  3. Вы используете CDN? Если все работает нормально, подключитесь к серверу Origin, но НЕ через CDN; это означает, что вам нужно установить некоторые параметры в вашем CDN, например, принять заголовки CORS. Точная настройка зависит от того, какой CDN вы используете. 

2
Deepak

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

<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
1
Mich. Gio.

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

Подобно тому, как другие имеют состояния, сначала вам нужно иметь конфигурацию 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

0
Tonio

В последней S3 Management Console, когда вы щелкнете по конфигурации CORS на вкладке Permissions, она покажет пример конфигурации CORS по умолчанию. Однако эта конфигурация не действительно активна! Вы должны сначала нажать «Сохранить», чтобы активировать CORS.

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

0
hackel

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

0
TigerBear

Эта конфигурация решила проблему для меня:

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