Разрешить AJAX GET от Amazon S3? (Access-Control-Allow-Origin)

Я храню объекты JSON в Amazon S3, и я хотел бы загрузить эти данные непосредственно из S3 из Javascript. Мой GET выглядит довольно универсальным:

$.ajax({
    'type':'GET',
    'url':'http://s3.amazonaws.com/mybucketname/'+id,
    'dataType':'text',
    'success':function(msg) {
        alert(msg);
    }
});

Я получаю следующую ошибку:

XMLHttpRequest cannot load http://s3.amazonaws.com/whatever/whatever. Origin http://mylocalhostname:9000 is not allowed by Access-Control-Allow-Origin.

Я могу получить этот URL-адрес из S3 с помощью curl или путем навигации там непосредственно из моего браузера. Мне действительно нужно проксировать все эти запросы через мои собственные серверы?

ОТВЕТЫ

Ответ 2

S3 не отправляет заголовок "Access-Control-Allow-Origin", если вы используете подстановочный знак *, например:

<AllowedOrigin>*</AllowedOrigin>

Чтобы заставить s3 отправлять заголовок AllowedOrigin, но все же позволить загружать ваш контент с любого сайта, используйте это:

<AllowedOrigin>http://*</AllowedOrigin>
<AllowedOrigin>https://*</AllowedOrigin>

Ответ 3

Много искал - это пример решения:

http://blog.bignerdranch.com/1670-upload-directly-to-amazon-s3-with-support-for-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>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Ответ 4

У нас была аналогичная проблема, но не с GET, а с назначенным S3 POST. Я думал, что это может быть полезно для кого-то, занимающегося этой проблемой.

в некоторых браузерах Dropzone.js lib не смог загружать изображения непосредственно в ведро S3 (назначенный S3 POST). Странная часть заключалась в том, что это происходило на некоторых компьютерах все время и на одном из двадцати попыток.

На одном компьютере нам удается зафиксировать ошибку в Firefox Debugger (вкладка сети)

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://s3-eu-west-1.amazonaws.com/pobble.com-browser-uploads-production. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://s3-eu-west-1.amazonaws.com/pobble.com-browser-uploads-production. (Reason: CORS request failed).

Обновление ведра C3 CORS для этого сработало для нас:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>http://www.myapp.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
        <ExposeHeader>Accept-Ranges</ExposeHeader>
        <ExposeHeader>Content-Range</ExposeHeader>
        <ExposeHeader>Content-Encoding</ExposeHeader>
        <ExposeHeader>Content-Length</ExposeHeader>
        <ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>https://www.app.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
        <ExposeHeader>Accept-Ranges</ExposeHeader>
        <ExposeHeader>Content-Range</ExposeHeader>
        <ExposeHeader>Content-Encoding</ExposeHeader>
        <ExposeHeader>Content-Length</ExposeHeader>
        <ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>
    </CORSRule>
</CORSConfiguration>

важная часть - это <ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>, благодаря этому S3 представляет заголовок ответа OPTIONS и POST

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

Совместная работа @anas-alaoui, @joserose и @equivalent

Ответ 6

Я боролся с тем же вопросом. только разница в том, что я хотел вытащить файл с Ajax из моего S3 и загрузить его на сайт.

После многого поиска я закончил добавление этой опции к моему запросу Ajax.

xhrFields: {withCredentials: true},

Работал как шарм, если у вас есть CORSConfiguration, чтобы разрешить все.

надеюсь, что это поможет.

Ответ 7

Это мой совет от: https://github.com/mozilla/pdf.js/issues/3150

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
        <ExposeHeader>Accept-Ranges</ExposeHeader>
        <ExposeHeader>Content-Range</ExposeHeader>
        <ExposeHeader>Content-Encoding</ExposeHeader>
        <ExposeHeader>Content-Length</ExposeHeader>
    </CORSRule>
</CORSConfiguration>

Ответ 8

Возможно, вы захотите увеличить конфигурацию MAX AGE, если у вас есть более крупные файлы, которые потребуется больше времени для загрузки, или они могут быть отключены раньше. Медиа-хостинг и так далее. Моя конфигурация для подстановочного доступа (любого домена) составляла 10000 секунд, что должно быть безопасно дольше, чем кто-либо должен загружать мои файлы даже при плохом соединении:

<?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>10000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Ответ 9

Для тех, кто борется с этой проблемой, как говорят другие, вы должны заставить S3 ответить заголовками CORS, добавив следующие строки в конфигурацию CORS:

<AllowedOrigin>http://*</AllowedOrigin>
<AllowedOrigin>https://*</AllowedOrigin>

НО, затем вы должны очистить кеш файлов браузера, так как старые заголовки на запрошенном ресурсе хранятся. В Chrome найдите параметр Очистить данные просмотра и затем выберите очистить кэш файла. Жесткая перезагрузка не удалит определенные файлы. Если вы предпочитаете очищать файловый кеш только для текущего сайта, этот ответ объясняет, как это сделать.

Для меня это был гоча.

Ответ 10

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

Эта конфигурация CORS работала как шарм