Javascript 亚马逊S3怪异的CORS行为：否'；访问控制允许原点'；请求的资源上存在标头

我正在AmazonS3上存储图像

我将此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>

问题是：

我的图像通常都是可见的，没有任何问题，错误出现在我添加了一个脚本来根据EXIF数据旋转图像之后

现在，如果您第一次访问页面（图像被旋转的页面），您仍然可以看到图像，但是没有应用旋转，我在控制台中看到每个图像的错误：

。。。已被CORS策略阻止：请求的资源上不存在“Access Control Allow Origin”标头。

但如果重新加载页面一次，则错误消失，并应用旋转。您可以使用匿名模式复制问题

以匿名方式访问。图像将被看到，但旋转将是错误的，错误出现在控制台中。点击F5，错误消失，应用旋转

我假设is与缓存有关，但旋转脚本不在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 }}">

exif.js

和这个脚本被加载到HTML

中，因为它们必须在加载图像之前就在那里

你知道为什么这会引发CORS问题吗

编辑

我想is与EXIF.js有关。它使用

XMLHttpRequest

处理图像。以下是：

编辑

这个问题似乎只发生在chrome浏览器上，这意味着CORS配置正常？

我在图像标签上添加了

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

---

可以在中找到一个小的解释。

您知道您正在链接到locahost网站吗？对不起，谢谢您告诉我。我现在正在本地主机和实时站点上进行测试。我更正了。响应的HTTP状态代码是什么？如果它工作（在重新加载页面后），代码是200。但在第一次尝试时，它们甚至不会出现在网络标签中。我不知道这怎么可能，因为他们就在那里。只缺少旋转。我编辑了问题。我知道可能是什么。S3没有正确设置Chrome期望的

Vary:origin

响应头，如果为bucket启用了CORS，但请求不包含

源文件

标头——当从

标记获取图像时，它不会包含该标头——因此Chrome不会返回以验证bucket是否允许您的源文件在CORS上下文中获取对象——它将假定缓存的副本（缺少访问控制允许源代码）是源代码将提供的唯一变体。我相信您的解决方案通过更改原始请求绕过了S3中的错误。另请参阅

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;
        }
    });
}

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