Amazon S3资产被CORS策略随机阻止

Question

这个让我难过。我正在使用Amazon S3存储桶来存储上传的图像，稍后在加载特定页面时可以访问这些图像。我之前遇到过此错误：

  

从来源“ https://uncvrd.co”访问“我的S3图片网址”中的图片   已被CORS政策阻止：否'Access-Control-Allow-Origin'   标头出现在请求的资源上。起源   因此，不允许访问“ https://uncvrd.co”。

无法理解，这也是在我的上一个项目中发生的，解决方法是确保将这些设置添加到我的S3存储桶策略中：

{
    "Version": "2008-10-17",
    "Statement": [
        {
            "Sid": "AllowPublicRead",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::unlink/*"
        }
    ]
}

（取消链接是我的存储桶的名称）

然后是我的CORS配置：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>https://uncvrd.co</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

我在其他站点的其他S3存储桶上使用了相同的设置，并且运行正常。

东西在这里，大部分时间都有效，但是在随机情况下（我在移动设备上看到的比在台式机上看到的更多），我收到了CORS阻止的错误...不一致！这很难复制，我不知道自己缺少什么。

我正在使用.NET MVC，并将S3 URL存储在数据库中，然后在页面加载时，我仅从控制器调用该URL，并将其传递给模型以显示在我的cshtml页面中。

根据我的网络标签，它试图加载两次图像并取消？

编辑：可能与图像缓存有关吗？我刚刚清除了缓存并重新加载，现在图像显示了

编辑2：尝试使用不同的网址参数进行变通方法2：

在我的HTML中，我现在有：<img crossorigin="anonymous" id="album-img" src="@Model.Album.ImageURL?x-request=html" />

但是，如何在JavaScript中没有参数的情况下访问上述URL？具有以下内容：

$("#album-img").imagesLoaded(function () {
         //if I add just the image url to the variable below it does not work
         var sourceImage = document.getElementById("album-img");
         var colorThief = new ColorThief();
         var red = colorThief.getColor(sourceImage)[0];
         var green = colorThief.getColor(sourceImage)[1];
         var blue = colorThief.getColor(sourceImage)[2];

         $('#platform-container').css({
             background: "linear-gradient(rgba(" + red + "," + green + "," + blue + ",1.0), #2a2a2a 296px)"
         });

     });