S3 跨域资源共享不工作答案

【问题标题】：S3 Cross-Origin Resource Sharing Not workingS3 跨域资源共享不工作
【发布时间】：2026-02-13 04:00:01
【问题描述】：

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

知道有什么问题吗？

【问题讨论】：

有机会发布您的 html/js 的净化版本吗？

标签： ruby-on-rails amazon-s3 cors

【解决方案1】：

我刚刚完成了。基本上，您可以按照步骤编辑您的 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'

【讨论】：

<AllowedHeader>*</AllowedHeader> 为我做的

【解决方案2】：

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

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

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

但是根据documentation，只有第一个 URL 可以与 CORS 一起使用：

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

【讨论】：

啊，我现在试试，看看能不能解决问题。