设置javascript图像与S3 CORS很少工作

Setting javascript Image with S3 CORS seldom working

本文关键字：工作 CORS S3 javascript 图像 设置      更新时间：2023-09-26

我正在尝试使用canvas元素来保存一些图像。我注意到我在chrome中有问题，并将问题隔离到设置初始图像。

<a href="#" data-src="https://s3.amazonaws.com/imphotos/uploads/thumb_IM_17592186048618_17592186048643.jpg">ONE</a>
<a href="#" data-src="https://s3.amazonaws.com/imphotos/uploads/thumb_IM_17592186047657_17592186047769.jpg">TWO</a>
<a href="#" data-src="https://s3.amazonaws.com/imphotos/uploads/thumb_IM_17592186047657_17592186047727.jpg">THREE</a>
  var setImg = function(src){
    var img = new Image;
    img.crossOrigin = "Anonymous";
    img.onload = function(){
      alert("LOADED!");
    }
    img.onerror = function(){
      alert("ERROR!");
    }
    img.src = src;
  };
  $(document).ready(function(){
    $("a").click(function(e){
      var src = $(e.currentTarget).data('src');
      setImg(src);
    });
  });

我第一次这样做，它工作得很好，但由于CORS设置，每个后续请求构建第二个/第三个图像都失败了，但这里是我的CORS设置:

<CORSRule>  
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedHeader>*</AllowedHeader>
    <AllowedMethod>GET</AllowedMethod>
</CORSRule>

在创建新图像的click处理程序之后，我得到错误:

来自origin 'https://s3.amazonaws.com'的图像被跨源资源共享策略阻止加载:请求的资源上没有'Access-Control-Allow-Origin'标头。因此，不允许访问源'http://localhost:3000'。

但一开始没有，所以我很困惑。它在Firefox中也能运行。

编辑:

经过更多的调试，我意识到第一个/随后的图像只是偶然的…这与装载的顺序无关。

我做了这个JS小提琴，只是我的S3桶中的一些图片正在使用这种方法，而其他的则不是。我是否需要将CORS设置追溯应用于桶中的图片?这是S3的bug吗?我的图像有问题吗?

如果你点击"TWO"，你会看到一个警告，指示加载，1/3都出错，并在控制台中给出CORS消息。

https://jsfiddle.net/6L44ttus/

编辑2:

读到这里，也许我需要把我的桶名放在前面(例如my-bucket)。S3而不是S3。我的天，我试过了，但没有用。现在所有的图像都不工作了:

https://jsfiddle.net/6L44ttus/3/

我知道我的问题了…我从我的localhost http加载图像，并从https拉资产…

编辑*实际上这根本不是答案。

有一些假阳性。我最终设置了一个具有正确标头的nginx代理。

相关文章：