S3 - 访问控制允许来源标头

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

https://i.stack.imgur.com/acAvH.png

<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> 

有关详细信息，您可以阅读 Editing Bucket Permission 上的这篇文章。

---

S3 现在期望规则在数组 Json format. 中

您可以在 s3 存储桶中找到它 -> 权限然后 -> 向下滚动 -> () 跨域资源共享 (CORS)

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

---

我在加载网络字体时遇到了类似的问题，当我在存储桶属性中单击“添加 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>HEAD</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration> 

我只是点击了保存，它很有效，我的自定义网络字体正在加载到 IE 和 Firefox 中。我不是这方面的专家，我只是认为这可能会对你有所帮助。

---

如果您的请求未指定 Origin 标头，S3 将不会在响应中包含 CORS 标头。这真的让我很震惊，因为我一直在尝试卷曲文件以测试 CORS，但卷曲不包括 Origin。

---

@jordanstephens 在评论中这么说，但它有点迷路了，对我来说是一个非常容易解决的问题。

我只是添加了 HEAD 方法并单击保存并开始工作。

* GET HEAD 3000 授权

---

这是完成这项工作的一种简单方法。

我知道这是一个老问题，但仍然很难找到解决方案。

首先，这适用于我使用 Rails 4、Paperclip 4、CamanJS、Heroku 和 AWS S3 构建的项目。

您必须使用 crossorigin: "anonymous" 参数请求您的图像。

    <img href="your-remote-image.jpg" crossorigin="anonymous"> 

将您的站点 URL 添加到 AWS S3 中的 CORS。这是来自亚马逊的参考资料。差不多，只需转到您的存储桶，然后从右侧的选项卡中选择“属性”，打开“权限”选项卡，然后单击“编辑 CORS 配置”。最初，我将 设置为 *。只需更改那个星号到您的 URL，请务必在单独的行中包含诸如 http:// 和 https:// 之类的选项。我期待星号接受“全部”，但显然我们必须比这更具体。

这就是我的样子。

https://i.stack.imgur.com/wFYQK.png

---

见上面的答案。 （但我也有一个 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 版本（即使我在显示的图像上使用了 crossorigin。

为了解决这个问题，我在为画布加载图像 url 时将 ?crossorigin 添加到了图像 url 的末尾（但您可以添加 ?blah，更改缓存状态是任意的）。如果您找到更好的解决方法，请告诉我对于铬

---

我将添加到this answer - 上面 - 它解决了我的问题。

要将 AWS/CloudFront 分发点设置为指向 CORS Origin Header，请单击分发点的编辑界面：

https://i.stack.imgur.com/2JAj3.png

转到行为选项卡并编辑行为，将“基于选定请求标头的缓存”从无更改为白名单，然后确保将 Origin 添加到白名单框中。有关更多信息，请参阅 AWS 文档中的 Configuring CloudFront to Respect CORS Settings。

https://i.stack.imgur.com/IGvqg.png

---

我在将 3D 模型从 S3 加载到 javascript 3D 查看器 (3D HOP) 时遇到了类似的问题，但奇怪的是只有某些文件类型 (.nxs)。

为我解决的问题是将 CORS 配置中的 AllowedHeader 从默认的 Authorization 更改为 *：

<?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>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

---

就像其他人所说的那样，您首先需要在 S3 存储桶中进行 CORS 配置：

<CORSConfiguration>
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod> <!-- Add this -->
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

但就我而言，这样做之后，它仍然无法正常工作。我使用的是 Chrome（可能与其他浏览器相同的问题）。

问题是 Chrome 正在缓存带有标头的图像（不包含 CORS 数据），因此无论我尝试在 AWS 中更改什么，我都不会看到我的 CORS 标头。

清除 Chrome 缓存并重新加载页面后，图像具有预期的 CORS 标头

---

我尝试了上面的所有答案，但没有任何效果。实际上，我们需要将上述答案中的 3 个步骤结合在一起才能使其发挥作用：

正如弗拉维奥所建议的；在您的存储桶上添加 CORS 配置： * GET 在图像上；提及 crossorigin： 你在使用 CDN 吗？如果一切正常，连接到源服务器但不是通过 CDN；这意味着您需要在 CDN 上进行一些设置，例如接受 CORS 标头。具体设置取决于您使用的 CDN。

---

我到达了这个线程，但上述解决方案都不适用于我的案例。事实证明，我只需从存储桶的 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>

我希望这可以节省一些人的头发。

---

首先，在您的 S3 存储桶中激活 CORS。使用此代码作为指导：

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>http://www.example1.com</AllowedOrigin>

   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedMethod>DELETE</AllowedMethod>

   <AllowedHeader>*</AllowedHeader>
 </CORSRule>
 <CORSRule>
   <AllowedOrigin>http://www.example2.com</AllowedOrigin>

   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedMethod>DELETE</AllowedMethod>

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

2）如果它仍然不起作用，请确保在您的 img 标签中添加一个带有“*”值的“crossorigin”。把它放在你的 html 文件中：

  let imagenes = document.getElementsByTagName("img");
    for (let i = 0; i < imagenes.length; i++) {
      imagenes[i].setAttribute("crossorigin", "*");

---

在 S3 存储桶的权限设置中设置 CORS 配置 * GET 3000 Authorization S3 仅添加 CORS 标头当 http 请求具有 Origin 标头时。 CloudFront 默认不转发 Origin 标头 您需要在 CloudFront 分配的行为设置中将 Origin 标头列入白名单。

---

我修复了它，写了以下内容：

<?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>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

为什么 <AllowedHeader>*</AllowedHeader> 有效而 <AllowedHeader>Authorization</AllowedHeader> 无效？

---

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

<?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>

---

请在更新 CORS 配置后清理浏览器的缓存。我在使用strapi时清理缓存后工作

---

fwuensche "answer" 正确设置 CDN；这样做，我删除了 MaxAgeSeconds。

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

---

在最新的 S3 管理控制台中，当您单击权限选项卡上的 CORS 配置时，它将显示默认的示例 CORS 配置。但是，此配置实际上并未激活！您必须先单击保存才能激活 CORS。

我花了很长时间才弄清楚这一点，希望这可以节省一些时间。

---

警告 - 黑客。

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

解决此问题的另一种方法是确保 S3Image 包含 crossorigin: '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 问题现已解决。多么痛苦啊！

---

<AllowedOrigin>*</AllowedOrigin>

这不是一个好主意，因为使用 * 您授予任何网站访问您存储桶中文件的权限。相反，您应该指定确切允许哪个源使用您的存储桶中的资源。通常，这是您的域名，例如

<AllowedOrigin>https://www.example.com</AllowedOrigin>

或者如果您想包含所有可能的子域：

<AllowedOrigin>*.example.com</AllowedOrigin>

---

以下是配置，对我来说很好。我希望它有助于解决您在 AWS S3 上的问题。

<?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>
    <ExposeHeader>ETag</ExposeHeader>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

---

就我而言，我首先使用以下配置解决它，转到权限，然后转到跨域资源共享（CORS），然后单击编辑并粘贴以下代码...

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "http://www.example1.com"
        ],
        "ExposeHeaders": []
    },
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "http://www.example2.com"
        ],
        "ExposeHeaders": []
    },
    {
        "AllowedHeaders": [],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

点击 here 了解更多信息

---

接受的答案有效，但似乎如果您直接访问资源，则没有跨域标头。如果您使用的是 cloudfront，这将导致 cloudfront 缓存没有标头的版本。当您转到加载此资源的其他 url 时，您将收到此跨域问题。

---

如果您的 CORS 设置对您没有帮助。

验证配置 S3 是否正确。我在 Storage.configure 中有一个无效的存储桶名称。我使用了一个简短的存储桶名称，它导致了一个错误：

请求的资源上不存在“Access-Control-Allow-Origin”标头。

---

对于它的价值，我遇到了类似的问题 - 在尝试添加特定的允许来源（不是 *）时。

原来我不得不纠正

<AllowedOrigin>http://mydomain:3000/</AllowedOrigin>

至

<AllowedOrigin>http://mydomain:3000</AllowedOrigin>

（注意 URL 中的最后一个斜杠）

希望这可以帮助某人

---

上面的大多数答案都不起作用。我试图使用 react-s3 将图像上传到 S3 存储桶，我得到了这个

跨域请求被阻止

错误。

您所要做的就是在 s3 Bucket 中添加 CORS Config 转到 S3 Bucket -> Persmission -> CORS Configuration 并粘贴以下内容

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>

   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedMethod>DELETE</AllowedMethod>

   <AllowedHeader>*</AllowedHeader>
 </CORSRule>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>

   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedMethod>DELETE</AllowedMethod>

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

将 * 替换为您的网站网址。参考：AWS CORS Settings

---

我遇到了类似的问题，coderVishal's answer 帮助我解决了这个问题，但就我而言，我需要使用 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 参数的更多信息。

---

对我来说，不添加区域

const s3 = new aws.S3({ apiVersion: '2006-03-01', region: 'us-west-2' });

---