7

我正在尝试使用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>

知道有什么问题吗？

4

2 回答 2

5

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

1) 登录 AWS 管理控制台并在https://console.aws.amazon.com/s3/打开 Amazon S3 控制台

2) 在 Buckets 列表中，打开要查看其属性的 Bucket，然后点击“添加 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'

于 2013-11-12T21:22:42.567 回答
3

我怀疑您没有使用 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 的跨域请求。

于 2013-02-24T14:58:25.717 回答