S3 - Заголовок доступу-контроль-дозволити вихід

Хтось встиг додати 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" />

Цей запит на отримання повинен містити відповідь, заголовок, 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, скріпки 4, CamanJS, Heroku та AWS S3.

Ви повинні надіслати запит на своє зображення за допомогою crossorigin: "anonymous"параметра.

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

Додайте URL-адресу свого сайту до CORS в AWS S3. Ось відхилення від Амазонки з цього приводу. Досить просто, перейдіть у відро, а потім виберіть " Властивості " на вкладках праворуч, відкрийте вкладку " Дозволи" , а потім натисніть " Змінити налаштування CORS ".

Спочатку я мав < AllowedOrigin>намір *. Просто змініть цю зірочку на свою URL-адресу, обов'язково вкажіть такі параметри, як http://і https://в окремих рядках. Я очікував, що зірочка прийме "Все", але, мабуть, ми повинні бути більш конкретними за це.

Ось як це мені здається.

Дивіться відповіді вище. (але у мене теж була хромова помилка)

Не завантажуйте та не показуйте зображення на сторінці в 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, що я просто довільно змінити статус кешу), коли я завантажив його на полотно. Повідомте мене, чи знайдете виправлення для CHROME

Я просто додам до цієї відповіді - вище - яка вирішила мою проблему.

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

Перейдіть на вкладку "Поведінки" та відредагуйте поведінку, змінивши "Кеш на основі вибраних заголовків запиту" з "Немає" на "Білий список", після чого переконайтеся, що Originдодано до білого списку. Докладніше див. У розділі Налаштування CloudFront для поваги налаштувань CORS у Документах AWS.

У мене виникли подібні проблеми із завантаженням 3D-моделей із S3 в 3D-переглядач javascript (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, коли ви натискаєте на конфігурацію CORS на вкладці "Дозволи", вона покаже зразок конфігурації 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 включає кросоригін: "використання даних", як згадувалося вище. У файлі, який ви використовуєте S3Image, (у мене є компонент, який створює кешовану версію S3Image, так що це ідеальне місце для мене), замініть метод прототипу image3 на прототип S3Image, щоб змусити його включити цей атрибут.

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>

Прийнята відповідь працює, але здається, що якщо ви переходите безпосередньо до ресурсу, то заголовків перехресного походження немає. Якщо ви використовуєте cloudfront, це призведе до того, що cloudfront буде кешувати версію без заголовків. Коли ви перейдете до іншої URL-адреси, яка завантажує цей ресурс, ви отримаєте цю проблему з перехресним походженням.

Якщо ваші налаштування CORS не допоможуть вам.

Перевірте правильність конфігурації S3 . У мене було недійсне ім’я відра Storage.configure. Я використав коротке ім’я відра, і це спричинило помилку:

На запитуваному ресурсі немає заголовка "Access-Control-Allow-Origin".

Спочатку активуйте 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) Якщо вона все ще не працює, обов’язково додайте до тегів img тему "crossorigin" зі значенням "*". Помістіть це у свій файл html:

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

Для чого це варто, у мене виникли подібні проблеми - при спробі додати певне дозволене походження (не *).

Виявляється, мені довелося виправити

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

до

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

(зверніть увагу на останній забій у URL-адресі)

Сподіваюся, що це комусь допоможе