S3 - Access-Control-Allow-Origin标头

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

此get请求应包含在响应中,标题, 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响应头.

Answer 1

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

有关详细信息,您可以阅读有关编辑存储桶权限的这篇文章.

Answer 2

我在加载网络字体方面遇到了类似的问题,当我点击"添加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中加载.我不是这方面的专家,我只是觉得这可以帮到你.

Answer 3

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

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

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

Answer 4

@jordanstephens在评论中说这个,但它有点丢失,对我来说是一个非常简单的修复.

我只是添加了HEAD方法并点击了已保存并开始工作.

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

Answer 5

如果您的请求未指定Origin标头,则S3将不在响应中包含CORS标头.这真的让我感到害怕,因为我一直试图卷曲文件来测试CORS但卷曲不包括在内Origin.

Answer 6

这是一种简单的方法.

我知道这是一个老问题,但仍难以找到解决方案.

首先,这对我使用Rails 4,Paperclip 4,CamanJS,Heroku和AWS S3构建的项目起作用.

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

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

在AWS S3中将您的站点URL添加到CORS.以下是亚马逊对此的反思.好吧,只需转到您的存储桶,然后从右侧的选项卡中选择" 属性 ",打开" 权限"选项卡,然后单击" 编辑CORS配置 ".

最初,我已经< AllowedOrigin>开始了*.只需更改星号,您的网址,一定要包括像选择http://和https://在不同的线路.我期待星号接受"全部",但显然我们必须更具体.

这就是它的样子.

Answer 7

见上面的答案.(但我也有一个铬虫)

不要在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在显示的图像上使用它.

要修复,我添加?crossorigin到图像的末尾url(但你可以添加?blah,它只是任意改变缓存状态)当我加载它为画布..让我知道如果你找到一个更好的修复Chrome

Answer 8

我只是添加到这个答案 -上面 - 这解决了我的问题.

要将AWS/CloudFront分发点设置为转发CORS Origin Header,请单击分发点的编辑界面:

转到行为选项卡并编辑行为,将白名单标题从无更改为白名单,然后确保Origin添加到列入白名单的框中.

Answer 9

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

之后清除浏览器缓存和重新载入页面，图像具有预期的CORS头

Answer 10

我在将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>

Answer 11

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

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

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

2. 在图像上；提到跨域：

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

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

Answer 12

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

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

Answer 13

首先，激活 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", "*");

Answer 14

更新 CORS 配置后，还请清理浏览器缓存。我的在使用 Strapi 时清理缓存后工作正常

Answer 15

我最近遇到了同样的问题，AWS 似乎对我们定义 CORS 配置的方式做了一些更改。例如，如果您过去想要在 S3 存储桶上允许某些方法，则必须在编辑器上执行以下操作：

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

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