Amazon S3 странное поведение CORS: в запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin» - PullRequest
Новая
       15

Amazon S3 странное поведение CORS: в запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin»

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

Я храню изображения на amazon S3.

Я использую эту конфигурацию CORS для своего ведра: 

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration>
 <CORSRule>
    <AllowedOrigin>https://www.monteurzimmer-1a.de</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
 </CORSRule>
</CORSConfiguration>

И у меня также есть правила ведра: 

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::my-bucket/*"
        }
    ]
}

Проблема:

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

Теперь, если вы посещаете страницу(тот, где изображения вращаются) в ПЕРВЫЙ раз, вы все еще можете видеть изображения, но поворот не применяется И я вижу ошибку в консоли для каждого изображения: ... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

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

Посетите эту страницу в режиме инкогнито.Изображения будут видны, но вращение будет неправильным, в консоли появится ошибка.Нажмите F5 и ошибка исчезнет, ​​поворот будет применен.

Я предполагаю, что это как-то связано с кэшированием, но сценарий вращения не на S3.

Это способ применения вращения: 

<img class="display-none" id="room_image_{{ loop.index }}"
onload="rotate_image(this)" alt="Zimmer Bild" 
src="https://s3.eu-central-1.amazonaws.com/my-bucket/userimages/{{ image.path }}">

Вот часть JS: 

function adjust_to_container($img, deg) {
    //console.log($img);
    //var parentHeight = $img.parent().height();
    var parentHeight = $img.parentElement.clientHeight;

    //console.log(parentHeight);
    if (deg == 90 || deg == 270) {
        $img.style.maxWidth = parentHeight + "px";
        //$img.css("max-width", parentHeight + "px");
    }
}

function rotate_image($img) {
    EXIF.getData($img, function() {
        console.log('Exif=', EXIF.getTag($img, "Orientation"));

        switch(parseInt(EXIF.getTag($img, "Orientation"))) {
            case 2:
                //$img.addClass('flip'); 
                $img.classList.add("flip");
                adjust_to_container(this, 180);
                break;
            case 3:
                //$img.addClass('rotate-180');
                $img.classList.add("rotate-180");
                adjust_to_container(this, 180);
                break;
            case 4:
                //$img.addClass('flip-and-rotate-180'); 
                $img.classList.add("flip-and-rotate-180");
                adjust_to_container(this, 180);
                break;
            case 5:
                //$img.addClass('flip-and-rotate-270'); 
                $img.classList.add("flip-and-rotate-270");
                adjust_to_container(this, 270);
                break;
            case 6:
                //$img.addClass('rotate-90'); 
                $img.classList.add("rotate-90");
                adjust_to_container(this, 90);
                break;
            case 7:
                //$img.addClass('flip-and-rotate-90'); 
                $img.classList.add("flip-and-rotate-90");
                adjust_to_container(this, 90);
                break;
            case 8:
                //$img.addClass('rotate-270'); 
                $img.classList.add("rotate-270");
                adjust_to_container(this, 270);
                break;
        }
    });
}

exif.js и этот скрипт загружены в HTML <HEAD>, потому что они должны быть там до загрузки изображений.

Есть идеи, почему это вызывает проблему CORS?

РЕДАКТИРОВАТЬ

Я предполагаю, что это как-то связано с EXIF.js.Он использует XMLHttpRequest для обработки изображений.Вот exit.js, который я использую :

EDIT

Кажется, эта проблема возникает только в браузерах Chrome, что означает, что конфигурация CORSок?

1 Ответ

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

Я добавил crossorigin="anonymous" в тег изображения, и, похоже, ошибка исчезла. 

<img class="display-none" id="room_image_{{ loop.index }}"
onload="rotate_image(this)" crossorigin="anonymous" alt="Zimmer Bild" 
src="https://s3.eu-central-1.amazonaws.com/my-bucket/userimages/{{ image.path }}">

Небольшое объяснение можно найти в принятом ответе здесь .

...