Amazon S3的怪异行为CORS:无“访问控制允许来源”标头出现在所请求的资源

问题描述 投票:0回答:1

我在亚马逊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.

但是,如果你重新载入页面一次,比错误消失和旋转应用。您可以通过使用隐身模式重现该问题。

在隐身模式下访问this page。图像将待观察,但旋转将是错误的,出现在控制台中的错误。按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 I use

编辑

看来这个问题只发生在Chrome浏览器,这意味着该CORS配置好吗?

javascript image amazon-web-services amazon-s3 cors
1个回答
1
投票

我加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 }}">

一个小的解释可以在accepted answer here找到。

© www.soinside.com 2019 - 2024. All rights reserved.