S3 - Access-Control-Allow-Origin标头

时间：2013-07-08 18:51:08

标签： amazon-web-services amazon-s3 cors http-headers

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

27 个答案:

答案 0 :(得分：148)

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

amazon-screen-shot

<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上的这篇文章。

答案 1 :(得分：93)

我在加载网络字体时遇到了类似的问题，当我点击“添加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＆amp; Firefox浏览器。我不是这方面的专家，我只是觉得这可以帮到你。

答案 2 :(得分：35)

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

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

＆＃13;
＆＃13; 
viaTable()
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：31)

如果您的请求未指定Origin标头，则S3不会在响应中包含CORS标头。这真的让我失望，因为我一直试图卷曲文件来测试CORS，但卷曲不包括Origin。

答案 4 :(得分：28)

这是一种简单的方法。

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

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

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

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

在AWS S3中将您的站点URL添加到CORS。 Here是亚马逊对此的反思。差不多，只需转到您的存储桶，然后从右侧的标签中选择“属性”，打开“权限标签，然后点击”修改CORS配置“。

     

最初，我将< AllowedOrigin>设置为*。只需将星号更改为您的网址，请务必在单独的行中添加http://和https://等选项。我期待星号接受“全部”，但显然我们必须更具体。

这就是我的看法。

enter image description here

答案 5 :(得分：22)

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

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

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

答案 6 :(得分：17)

见上面的答案。 （但我也有一个铬虫）

不要在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（但是当我为画布加载时，您可以添加?blah，它只是随意改变缓存状态） ..如果您找到更好的解决方案，请告诉我们

答案 7 :(得分：15)

我只是添加到this answer - 上面 - 这解决了我的问题。

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

enter image description here

转到行为标签并编辑行为，更改＆＃34;基于所选请求标头的缓存＆＃34;从“无”到“白名单”，然后确保将Origin添加到白名单框中。有关详情，请参阅AWS文档中的Configuring CloudFront to Respect CORS Settings。

enter image description here

答案 8 :(得分：9)

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

为我修复的是在CORS配置中将Javadoc text color从默认AllowedHeader更改为Authorization：

*

答案 9 :(得分：3)

  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请求具有Origin标头时，S3才会添加CORS标头。

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

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

答案 10 :(得分：3)

我尝试了上面的所有答案，没有任何效果。实际上，我们需要从上面的答案中共同执行3个步骤才能使其工作：

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

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

  2. 在图像上;提到crossorigin：

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

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

答案 11 :(得分：3)

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

i = 1

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

&p[i].i == 112

答案 12 :(得分：2)

我修改了以下内容：

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

答案 13 :(得分：2)

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

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

答案 14 :(得分：1)

就我而言，我使用以下配置解决它 首先，转到权限，然后转到跨域资源共享（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了解更多信息

答案 15 :(得分：1)

请在更新 CORS 配置后清理浏览器的缓存。我的工作是在清洁 cachw 后与 Strapi 一起工作

答案 16 :(得分：1)

<AllowedOrigin>*</AllowedOrigin>

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

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

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

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

答案 17 :(得分：1)

警告-黑客。

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

答案 18 :(得分：1)

像其他人一样，您首先需要在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标头。 / p>

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

答案 19 :(得分：1)

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

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

答案 20 :(得分：0)

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

答案 21 :(得分：0)

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

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

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

答案 22 :(得分：0)

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

答案 23 :(得分：0)

以上大多数答案均无效。我试图使用react-s3将图像上传到S3存储桶中，我明白了

跨域请求被阻止

错误。

所有您需要做的就是在s3存储桶中添加CORS Config 转到S3存储桶->权限-> CORS配置 并粘贴下面的

<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

答案 24 :(得分：0)

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

答案 25 :(得分：0)

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

我花了太长时间才弄明白这一点，希望这会节省一些时间。

答案 26 :(得分：-1)

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

原来我必须纠正

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

到

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

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

希望这对某人有帮助

相关问题
最新问题