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管理控制台并通过以下网址打开Amazon S3控制台:https://console.aws.amazon.com/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

但根据文档，只有第一个 URL 可以使用 CORS ：

借助 CORS，您可以将存储桶配置为显式启用来自 website.s3-website-us-east-1.amazonaws.com 的跨源请求。