通常，你所需要做的就是在桶属性中“添加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> 

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

警告-黑客攻击。

如果您使用S3Image来显示图像，然后尝试通过获取获取图像，可能是将其插入到PDF中或进行其他处理，请注意Chrome将缓存不需要CORS preflight请求的第一个结果，然后尝试在没有preflight OPTIONS请求的情况下获取相同的资源，由于浏览器的限制将失败。

解决这个问题的另一种方法是确保S3Image包含如上所述的交叉来源:“use-credentials”。在您使用S3Image的文件中(我有一个创建S3Image缓存版本的组件，因此这是我的最佳位置)，重写S3Image的原型imageEl方法，以强制它包含此属性。

S3Image.prototype.imageEl = function (src, theme) {
    if (!src) {
        return null;
    }
    var selected = this.props.selected;
    var containerStyle = { position: 'relative' };
    return (React.createElement("div", { style: containerStyle, onClick: this.handleClick },
        React.createElement("img", { crossOrigin: 'use-credentials', style: theme.photoImg, src: src, onLoad: this.handleOnLoad, onError: this.handleOnError}),
        React.createElement("div", { style: selected ? theme.overlaySelected : theme.overlay })));
};

403问题现已解决。多么痛苦啊!

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

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

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

这个配置为我解决了问题:

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

我只想在上面加上一个答案——这解决了我的问题。

要将AWS/CloudFront分发点设置为朝向CORS源标头，请单击进入分发点的编辑界面:

进入行为选项卡并编辑行为，将“基于所选请求头的缓存”从无更改为白名单，然后确保将Origin添加到白名单框中。有关更多信息，请参阅AWS文档中的配置CloudFront以尊重CORS设置。

见以上答案。(但我也有一个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