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

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

我想到了这个问题，上面的解决方案都不适用于我的情况。结果是，我只需要从我的桶的CORS配置中的<AllowedOrigin> URL中删除一个拖尾斜杠。

失败:

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

成功:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>http://www.mywebsite.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</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问题现已解决。多么痛苦啊!

我也遇到了类似的问题，coderVishal的回答帮助我解决了这个问题，但在我的情况下，我需要在下一个配置中使用Terraform:

resource "aws_s3_bucket" "bucket" {
  bucket = var.bucket
  acl    = "public-read"

  # Cross-origin resource sharing (CORS)
  cors_rule {
    allowed_headers = ["*"]
    allowed_methods = ["GET", "HEAD"]
    allowed_origins = ["*"]
    expose_headers  = []
    max_age_seconds = 3000
  }
}

在文档中阅读关于cors_rule参数的更多信息。

如果你的CORS设置不起作用。

检查S3配置是否正确。我在Storage.configure中有一个无效的桶名。我使用了桶的短名称，它导致了一个错误:

被请求对象上没有'Access-Control-Allow-Origin'报头 资源。

fwuensche“答案”是正确的设置CDN;这样做，我删除了maxagesecseconds。

<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>