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

是否有人设法添加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响应头。

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

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

我在加载Web字体时遇到了类似的问题，当我单击存储桶属性中的“添加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> 

我只是单击“保存”，然后开始工作，我的自定义Web字体正在IE和Firefox中加载。我不是这方面的专家，我只是认为这可能会对您有所帮助。

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

@jordanstephens在评论中说了这一点，但它有点迷路，对我来说真的很容易解决。

我只是添加了HEAD方法，然后单击保存，它开始起作用。

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

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

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

首先，这对我来说是一个使用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://。我期望星号接受“全部”，但是显然我们必须比这更具体。

这就是我的样子。

请参阅以上答案。（但是我也有一个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在显示的图像上使用了该版本）。

为了修复，我?crossorigin在图像url的末尾添加了一个（但您可以添加?blah，更改缓存状态是任意的），当我将其加载到画布时。

我只是在上面添加了此答案，从而解决了我的问题。

要将AWS / CloudFront分发点设置为偏向CORS原始标头，请单击进入分发点的编辑界面：

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

我在将S3的3D模型加载到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>

与其他状态一样，您首先需要在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头

我尝试了以上所有答案，但没有任何效果。实际上，我们需要从上述答案中分三个步骤来使其起作用：

1. 如Flavio所建议；在您的存储桶中添加CORS配置：

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

2. 在图像上；提及跨源：

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

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

我到达此线程，以上解决方案均未应用于我的情况。事实证明，我只需要从<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>

我希望这可以节省一些人的时间。

1. 在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> 
   

2. 仅当http请求具有标头时，S3才添加CORS标Origin头。

3. CloudFront 默认情况下不转发Origin标头

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

我通过编写以下代码修复了问题：

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

fwuensche“ answer”是建立CDN的秘诀；为此，我删除了MaxAgeSeconds。

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

在最新的S3管理控制台中，当您单击“权限”选项卡上的CORS配置时，它将显示默认的示例CORS配置。但是，此配置实际上并未激活！您必须先单击保存才能激活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>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <ExposeHeader>ETag</ExposeHeader>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

警告-骇客。

如果您使用S3Image来显示图像，然后尝试通过获取来获取图像，或者将其插入PDF或进行其他处理，请注意Chrome将缓存不需要CORS预检请求的第一个结果，并且然后尝试在没有预检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问题现在已解决。真是痛苦啊！

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

可接受的答案有效，但似乎如果直接访问资源，则没有跨域标头。如果您使用的是Cloudfront，这将导致Cloudfront缓存不带标题的版本。当您转到另一个加载该资源的URL时，将遇到此跨域问题。

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

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

所请求的资源上没有“ Access-Control-Allow-Origin”标头。

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

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

原来我必须纠正

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

至

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

（请注意URL中的最后一个slah）

希望这可以帮助某人