Amazon S3奇怪的CORS行为：所请求的资源上不存在“ Access-Control-Allow-Origin”标头

Question

I am storing images on amazon S3. 我将图像存储在亚马逊S3上。

I use this CORS configuration for my bucket: 我将以下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>

And I also have bucket rules: 我还有存储桶规则：

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

The issue is: 问题是：

My images are generally all visible without any issues, the error appeared after I added a script to rotate images based on their EXIF data. 我的图像通常都是可见的，没有任何问题，在添加脚本以根据图像的EXIF数据旋转图像后出现了错误。

Now if you visit the page (the one where images are rotated) for the FIRST time, you can still see the images, but the rotation is not applied AND I see the error in the console for each image: ... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 现在，如果您第一次访问页面（旋转图像的页面），您仍然可以看到图像，但是未应用旋转，并且我在控制台中看到每个图像的错误： ... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

BUT if you reload the page once, than the error is gone and the rotation is applied. 但是，如果您一次重新加载页面，则错误消失了，并且应用了旋转。 You can reproduce the issue by using incognito mode. 您可以使用隐身模式来重现该问题。

Visit this page in incognito mode. 以隐身模式访问此页面。 Images will be seen but rotation will be wrong, the error appears in the console. 可以看到图像，但旋转错误，控制台中会出现错误。 Hit F5 and the error is gone, rotation is applied. 按下F5键，错误消失，应用旋转。

I assume is has something to do with caching, but the rotation script is not on S3. 我认为这与缓存有关，但是旋转脚本不在S3上。

This is how I apply the rotation: 这就是我应用轮换的方式：

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

Here is the JS part: 这是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;
        }
    });
}

The exif.js and this script are loaded in the HTML <HEAD> because they must be there before the images are loaded. exif.js和此脚本已加载到HTML <HEAD>因为它们必须在加载图像之前就已经存在。

Any ideas why this triggers a CORS problem? 任何想法为什么会触发CORS问题？

EDIT 编辑

I assume is has something to do with EXIF.js. 我认为与EXIF.js有关。 It uses XMLHttpRequest to process the images. 它使用XMLHttpRequest处理图像。 Here is the exit.js I use : 这是我使用的exit.js ：

EDIT 编辑

It seems this issue happens only on chrome browsers, which means the CORS configuration is ok? 似乎仅在Chrome浏览器上会出现此问题，这意味着CORS配置还可以吗？

Answer 1

I added crossorigin="anonymous" on the image tag and it seems the error is gone. 我在图片标签上添加了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 }}">

A small explanation can be found in the accepted answer here . 在此处接受的答案中可以找到一个小的解释。

Amazon S3奇怪的CORS行为：所请求的资源上不存在“ Access-Control-Allow-Origin”标头

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-02-04 11:49:52

Amazon S3奇怪的CORS行为：所请求的资源上不存在“ Access-Control-Allow-Origin”标头

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-02-04 11:49:52

解决方案1
1 已采纳 2019-02-04 11:49:52