见以上答案。(但我也有一个chrome bug)

不要在CHROME中加载和显示图片。(如果稍后要创建一个新实例)

在我的例子中，我加载图像并在页面上显示它们。当它们被点击时，我创建了它们的一个新实例:

// there is already an html <img /> on the page, I'm creating a new one now
img = $('<img crossorigin />')[0]
img.onload = function(){
  context.drawImage(img, 0, 0)
  context.getImageData(0,0,w,h)
}
img.src = 'http://s3.amazonaws.com/my/image.png'; // I added arbitrary ?crossorigin to change the URL of this to fix it

Chrome已经缓存了另一个版本，从来没有试图重新获取交叉来源版本(即使我在显示的图像上使用交叉来源)。

为了解决这个问题，我添加了?crossorigin到图像url的末尾(但你可以添加?blah，这只是随意改变缓存状态)，当我为画布加载它。让我知道，如果你找到一个更好的修复CHROME

通常，你所需要做的就是在桶属性中“添加CORS配置”。

<CORSConfiguration>带有一些默认值。我只需要这些就能解决你的问题。只需点击“保存”，再试一次，看看它是否工作。如果它没有，你也可以尝试下面的代码(来自alxrb答案)，这似乎对大多数人都有效。

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

有关更多信息，您可以阅读这篇编辑桶权限的文章。

Set CORS configuration in Permissions settings for you S3 bucket <?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <MaxAgeSeconds>3000</MaxAgeSeconds> <AllowedHeader>Authorization</AllowedHeader> </CORSRule> </CORSConfiguration> S3 adds CORS headers only when http request has the Origin header. CloudFront does not forward Origin header by default You need to whitelist Origin header in Behavior settings for your CloudFront Distribution.

我最近遇到了同样的问题，似乎AWS对我们定义CORS配置的方式做了一些更改。例如，如果你想允许某些方法在过去的S3桶上，你必须在编辑器上做这样的事情:

下面的配置与上面的配置相同，但采用数组的形式。

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "HEAD",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

在最新的S3管理控制台中，当您单击Permissions选项卡上的CORS配置时，它将显示一个默认的示例CORS配置。但是，这个配置实际上并没有激活!您必须首先单击save才能激活CORS。

我花了很长时间才弄明白，希望这能帮大家节省一些时间。

公认的答案是可行的，但如果直接访问资源，似乎就不存在跨源头。如果您正在使用cloudfront，这将导致cloudfront缓存没有标头的版本。当你转到一个不同的url来加载这个资源时，你会遇到这个跨源问题。