S3跨源资源共享不起作用

Question

我正在尝试使用blur.js模糊用户上传的图片，而我正在将图像存储在Amazon S3上。我已经设置了我认为正确的CORS配置，但图像不能模糊，我在浏览器中收到此错误：

  Unable to get image data from canvas because the canvas has been tainted by cross-origin data.

这是我的CORS配置：

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

知道什么是错的吗？

Answer 1

我刚刚完成了。基本上，您可以按照步骤编辑S3存储桶权限并使其工作。如果您需要任何进一步的帮助，请在下面留言。

1）登录AWS管理控制台并在https://console.aws.amazon.com/s3/

打开Amazon S3控制台

2）在Buckets列表中，打开要查看其属性的存储桶，然后单击“添加CORS配置”

3）在标签<CORSConfiguration>

之间写下您愿意添加的规则

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

您可以在http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

了解有关规则的更多信息

4）在您将在画布中使用的图像上指定crossorigin ='anonymous'

Answer 2

我怀疑您没有使用CORS支持所需的正确S3端点地址格式。

即。 S3存储桶支持以下两种格式：

1. http://bucket.s3.amazonaws.com/object
2. http://s3.amazonaws.com/bucket/object

但根据documentation：

，只有第一个URL可以与CORS一起使用

  

使用CORS，您可以配置存储桶以明确启用来自website.s3-website-us-east-1.amazonaws.com的跨源请求。