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

Question

有没有人设法添加Access-Control-Allow-Origin到响应标头？我需要的是这样的：

<img src="http://360assets.s3.amazonaws.com/tours/8b16734d-336c-48c7-95c4-3a93fa023a57/1_AU_COM_180212_Areitbahn_Hahnkoplift_Bergstation.tiles/l2_f_0101.jpg" />

此获取请求应包含在响应、标头中，Access-Control-Allow-Origin: *

我的存储桶 CORS 设置如下所示：

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

如您所料，没有Origin响应标头。

score 220 · Accepted Answer

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

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

score 164 · Accepted Answer

S3 现在期望规则采用 Array Json 格式。

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

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

score 112 · Accepted Answer

我在加载网络字体时遇到了类似的问题，当我在存储桶属性中单击“添加 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 中。我不是这方面的专家，我只是认为这可能会对你有所帮助。

score 66 · Accepted Answer

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

score 50 · Accepted Answer

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

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

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

score 40 · Accepted Answer

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

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

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

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

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

将您的站点 URL 添加到 AWS S3 中的 CORS。这是来自亚马逊的参考资料。差不多，只需转到您的存储桶，然后从右侧的选项卡中选择“属性”，打开“权限”选项卡，然后单击“编辑 CORS 配置”。

最初，我< AllowedOrigin>设置为*. 只需将该星号更改为您的 URL，请确保在单独的行中包含http://和之类的选项。https://我期待星号接受“全部”，但显然我们必须比这更具体。

这就是我的样子。

score 30 · Accepted Answer

见上面的答案。（但我也有一个 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，更改缓存状态是任意的）。如果您找到更好的 CHROME 修复方法，请告诉我

score 27 · Accepted Answer

我将添加到这个答案- 上面 - 它解决了我的问题。

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

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

score 16 · Accepted Answer

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

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

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

score 14 · Accepted Answer

就像其他人所说的那样，您首先需要在 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 标头

score 7 · Accepted Answer

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

正如弗拉维奥所建议的；在您的存储桶上添加 CORS 配置：

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

在图像上；提到跨域：

<img href="abc.jpg" crossorigin="anonymous">

你在使用 CDN 吗？如果一切正常，连接到源服务器但不是通过 CDN；这意味着您需要在 CDN 上进行一些设置，例如接受 CORS 标头。具体设置取决于您使用的 CDN。

score 7 · Accepted Answer

我到达了这个线程，但上述解决方案都不适用于我的案例。事实证明，我只需要从存储桶的 CORS 配置中的URL中删除一个斜杠即可。<AllowedOrigin>

失败：

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

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

score 5 · Accepted Answer

首先，在您的 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", "*");

score 4 · Accepted Answer

在 S3 存储桶的权限设置中设置 CORS 配置

<?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 仅在 http 请求具有标头时才添加 CORS 标Origin头。
CloudFront默认不转发标头Origin

您需要Origin在 CloudFront 分配的行为设置中将标头列入白名单。

score 3 · Accepted Answer

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

<?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>而不工作？

score 3 · Accepted Answer

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

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

score 2 · Accepted Answer

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

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

score 2 · Accepted Answer

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

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

score 2 · Accepted Answer

警告 - 黑客。

如果您使用 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 问题现已解决。多么痛苦啊！

score 2 · Accepted Answer

<AllowedOrigin>*</AllowedOrigin>

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

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

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

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

score 2 · Accepted Answer

以下是配置，对我来说很好。我希望它有助于解决您在 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>

score 2 · Accepted Answer

2

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

于 2021-03-18T09:15:14.410 回答

score 1 · Accepted Answer

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

score 1 · Accepted Answer

就我而言，我首先使用以下配置解决它，转到权限，然后转到跨域资源共享（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": []
    }
]

点击这里了解更多信息

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

原来我不得不纠正

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

至

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

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

希望这可以帮助某人

score 0 · Accepted Answer

上面的大多数答案都不起作用。我试图使用 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 设置

score 0 · Accepted Answer

我遇到了类似的问题，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参数的更多信息。

score 0 · Accepted Answer

对我来说，不添加区域

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

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

29 回答 29

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

Related

Reference