Подтвердить что ты не робот

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

Пользователю удалось добавить 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.

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

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

Ответ 3

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

Я просто добавил метод HEAD и щелкнул сохраненный, и он начал работать.

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

Ответ 4

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

Ответ 5

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

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

Чтобы начать, это сработало для меня в проекте, построенном с 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://. Я ожидал, что звездочка примет "все", но, видимо, мы должны быть более конкретными, чем это.

Вот как он меня ищет.

введите описание изображения здесь

Ответ 6

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

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

Ответ 7

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

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

enter image description here

Перейдите на вкладку Поведение и изменить поведение, изменяя "Cache на основе выбранных заголовков запроса" от нуля до Whitelist, то убедитесь, что Origin будет добавлен в белый список коробки. Дополнительные сведения см. В разделе " Настройка CloudFront для соблюдения настроек CORS" в Документах AWS.

enter image description here

Ответ 8

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

Ответ 9

Я перепробовал все ответы выше и ничего не получалось. На самом деле нам нужно 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 вы используете.

Ответ 10

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

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

Ответ 11

  • Установите конфигурацию 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>

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

  • CloudFront не пересылает Origin заголовок по умолчанию

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

Ответ 12

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

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

Ответ 13

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

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

Ответ 14

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

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

Ответ 15

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

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

Ответ 16

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

Ответ 17

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

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

Еще один способ обойти это - убедиться, что S3Image включает в себя crossorigin: "use-credentials", как упомянуто выше. В файле, который вы используете S3Image (у меня есть компонент, который создает кэшированную версию S3Image, так что это идеальное место для меня), переопределите метод imageEl прототипа 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 проблема теперь решена. Какая боль аггрр!

Ответ 18

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

Ответ 19

<AllowedOrigin>*</AllowedOrigin>

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

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

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

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

Ответ 20

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