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

Question

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

38

javascript jquery amazon-s3

Источник

user561519 03 июл '12 в 17:14

8 ответов

Решение

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

<AllowedOrigin>*</AllowedOrigin>

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

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

43

Источник

user1362815 04 сен '14 в 18:52

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

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>

6

Источник

user1213618 25 ноя '13 в 15:08

У нас была похожая проблема, но не с 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).

Обновление ведра S3 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

5

Источник

user473040 26 май '16 в 15:25

Вы можете использовать запрос jsonp вместо json. Вот подробности. http://api.jquery.com/jQuery.ajax/

3

Источник

user826656 03 июл '12 в 17:32

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

После долгих поисков я добавил эту опцию в свой Ajax-запрос.

xhrFields: {withCredentials: true},

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

Надеюсь, поможет.

1

Источник

user2207579 11 дек '13 в 14:26

Возможно, вы захотите увеличить конфигурацию 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>

1

Источник

user220325 29 авг '17 в 03:12

<?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 работала как шарм

1

Источник

user8381015 04 окт '19 в 13:38

Это мой совет от: 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>

0

Источник

user4809691 20 апр '15 в 09:18

В моем случае я хочу ПОЛУЧИТЬ некоторые ресурсы из корзины "myBucket".

На стороне клиента S3 AWS S3 теперь поддерживает JSON для настройки политик CORS [ref]

Политика ведра:

[
    {
        "AllowedHeaders": [
            "*",
            "x-amz-*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

На стороне сервера / клиента (JQUERY Ajax)

$.ajax({
    type: "GET", 
    url: "https://myBucket/myObject",
});

Попробуйте! Надеюсь, это поможет!

0

Источник

user10178933 12 ноя '20 в 05:44

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

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

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

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

0

Источник

user1938194 10 фев '19 в 02:57

Другие вопросы по тегам javascript jquery amazon-s3