Ошибка CORS в S3 для загрузки изображения через JS - PullRequest
Новая
       11

Ошибка CORS в S3 для загрузки изображения через JS

0 голосов
/ 21 февраля 2019

У меня есть настройка s3 bucket с открытыми файлами.Это конфигурация CORS для этого сегмента - 

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/938934/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

На моей html-странице я пытаюсь получить доступ к файлу изображения из этого сегмента, и я могу отобразить изображение на моей веб-странице через сегмент s3, который -

<img src="bucketurl/abcd"/>

Но, когда я пытаюсь загрузить это изображение с помощью JavaScript, оно не загружается и выдает ошибку cors.(это код стороннего плагина, который не может обойти CORS. http://html2canvas.hertzen.com/) - 

var imageLoadHandler = function imageLoadHandler(supportsDataImages) {
    return new Promise(function (resolve, reject) {
        var img = new Image();
        img.onload = function () {
            return resolve(img);
        };
        //ios safari 10.3 taints canvas with data urls unless crossOrigin is set to anonymous
        if (!supportsDataImages || useCORS) {
            img.crossOrigin = 'anonymous';
        }

        img.onerror = reject;
        img.src = src;
        if (img.complete === true) {
            // Inline XML images may fail to parse, throwing an Error later on
            setTimeout(function () {
                resolve(img);
            }, 500);
        }
        if (_this4.options.imageTimeout) {
            var timeout = _this4.options.imageTimeout;
            setTimeout(function () {
                return reject( true ? 'Timed out (' + timeout + 'ms) fetching ' + src.substring(0, 256) : '');
            }, timeout);
        }
    });
};

Это ошибка - 

Access to image at 'https://bucketurl/abcd' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Я не хочу открывать ресурсыиз всех источников. Я просто хочу открыть ресурсы из s3bucket. Как и какие изменения необходимо сделать для этого.

1 Ответ

0 голосов
/ 22 февраля 2019

Ваша текущая конфигурация CORS допускает запросы GET, HEAD и POST из всех источников.

Однако некоторые браузеры отправляют предварительный запрос 1 чтобы проверить, какие HTTP-запросы поддерживаются сервером.

Предварительный запрос - это запрос OPTIONS, который выполняется с определенными заголовками.Ваша текущая конфигурация имеет только запросы предварительной проверки с разрешенным заголовком авторизации
Это означает, что браузеры, такие как Google Chrome, которые отправляют запрос предварительной проверки, не будут работать в этой заметке.

Вы должны включить записи для всех заголовков, отправленных впредварительный запрос в качестве разрешенного заголовка в вашей конфигурации CORS. 2

Я предлагаю ограничить CORSRule только теми источниками, которые вы рассматривали.Продолжайте изменять правила до тех пор, пока не встретите ограничительную политику, соответствующую вашему приложению. 3 

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/938934/">
<CORSRule>
    <AllowedOrigin>http://localhost:8080</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
    <AllowedHeader>/replace with another preflight header/</AllowedHeader>
</CORSRule>
<CORSRule>
    <AllowedOrigin>http://html2canvas.herzen.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>OPTIONS</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
    <AllowedHeader>/replace with another preflight header/</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Вы можете просмотреть заголовки ответа для предварительного запроса, когда вы проверяете его на вкладке сети вашего браузера.

Вы также можете указать подстановочный знак для соответствия разрешить все заголовки в запросе предварительной проверки. 

    <AllowedHeader>*</AllowedHeader>
...