S3 – 访问控制允许源标题
有没有人设法将Access-Control-Allow-Origin到响应头文件中？ 我需要的是这样的：
<img src="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响应头。
通常，您只需要在存储桶属性中“添加CORSconfiguration”。
<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> <MaxAgeSeconds>3000</MaxAgeSeconds> <AllowedHeader>Authorization</AllowedHeader> </CORSRule> </CORSConfiguration>
有关更多信息，您可以阅读这篇关于编辑桶权限的文章。
我在加载networking字体时遇到类似的问题，当我单击“添加CORSconfiguration”时，在存储桶属性中，此代码已经存在：
<?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>
我只是点了保存，它工作了一个治疗，我的自定义Web字体加载在IE浏览器和Firefox。 我不是这方面的专家，我只是认为这可能会帮助你。
这是一个简单的方法来完成这项工作。
我知道这是一个古老的问题，但仍然很难find解决办法。
首先，这对我用Rails 4，Paperclip 4，CamanJS，Heroku和AWS S3构build的项目很有帮助。
您必须使用crossorigin: "anonymous"请求您的图像crossorigin: "anonymous"参数。
<img href="your-remote-image.jpg" crossorigin="anonymous">
在AWS S3中将您的站点URL添加到CORS。 这是来自亚马逊的一个参考。 几乎所有的，只要去你的桶，然后从右侧的选项卡中select“ 属性 ”，打开“ 权限”选项卡，然后单击“ 编辑CORSconfiguration ”。
最初，我将
< AllowedOrigin>设置为*。 只要将星号更改为您的url，请务必在不同的行中包含像http://和https://这样的选项。 我期待星号接受“全部”，但显然我们必须比这更具体。
这是它如何找我。
如果你的请求没有指定一个Origin头域，S3将不在响应中包含CORS头域。 这真的扔了我，因为我一直试图curl的文件来testingCORS，但curl不包括Origin 。
看到上面的答案。 （但我也有一个铬错误）
不要在CHROME页面加载和显示图像。 （如果你以后要创build一个新的实例）
在我的情况下，我加载的图像，并显示在页面上。 当他们被点击时，我创build了一个新的实例：
// 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已经caching了另外一个版本，从不试图重新获取crossorigin版本（即使我在显示的图片上使用了crossorigin 。
为了解决这个问题，我在图像url的末尾添加了?crossorigin （但是你可以添加?blah ，它只是任意改变caching的状态），当我把它加载到canvas上的时候。让我知道如果你find更好的修复CHROME
我只是添加到这个答案 -上面，这解决了我的问题。
要将AWS / CloudFront分发点设置为转发CORS原始标题，请单击分发点的编辑界面：
转到“行为”选项卡并编辑行为，将“白名单标题”从“无”更改为“白名单”，然后确保“ Origin已添加到列入白名单的框中。
我有类似的问题，从S3加载3D模型到一个JavaScript 3D查看器（3D HOP），但奇怪的是只有某些文件types（.nxs）。
什么解决了我的是更改AllowedHeader从默认Authorization *在CORSconfiguration：
<?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>
我试过上面的所有答案，没有任何工作。 其实，我们需要从上面的三个步骤一起来使它工作：
- 正如弗拉维奥所说的那样; 在您的存储桶中添加CORSconfiguration：
<CORSConfiguration> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> </CORSRule> </CORSConfiguration>
- 在形象上; 提起crossorigin：
<img href="abc.jpg" crossorigin="anonymous">
- 你在使用CDN吗？ 如果一切工作正常连接到原始服务器，但不是通过CDN; 这意味着你需要在CDN上进行一些设置，比如接受CORS头文件。 确切的设置取决于您正在使用哪个CDN。
我到了这个线索，上述的解决scheme都不适用于我的案子。 事实certificate， 我只需要删除我的桶的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>
胜利：
<?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存储桶的权限设置中设置CORSconfiguration
<?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> -
只有当http请求包含
Origin头时，S3才添加CORS头。 -
CloudFront默认不会转发
Origin标头您需要在“CloudFront分配”的“行为”设置中将
Origin标题添加到白名单中。
@jordanstephens在评论中这样说，但它有点迷路，对我来说是一个非常简单的解决scheme。
我只是添加HEAD方法，并单击保存，它开始工作。
<CORSConfiguration> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <AllowedMethod>HEAD</AllowedMethod> <!-- Add this --> <MaxAgeSeconds>3000</MaxAgeSeconds> <AllowedHeader>Authorization</AllowedHeader> </CORSRule> </CORSConfiguration>
fwuensche“回答”是为了设置一个CDN; 这样做，我删除了MaxAgeSeconds。
<CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <AllowedHeader>Authorization</AllowedHeader> </CORSRule>
在最新的S3pipe理控制台中，当您单击“权限”选项卡上的CORSconfiguration时，它将显示默认的CORS示例configuration。 然而，这个configuration实际上并不活跃。 您必须先点击保存才能激活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>
为什么<AllowedHeader>*</AllowedHeader>工作正常且<AllowedHeader>Authorization</AllowedHeader>不是？
