Fatal编程技术网

Amazon web services S3-访问控制允许原始标头

amazon-web-services amazon-s3 cors

Amazon web services S3-访问控制允许原始标头,amazon-web-services,amazon-s3,cors,http-headers,Amazon Web Services,Amazon S3,Cors,Http Headers,是否有人设法将访问控制允许源站添加到响应标题中？ 我需要的是这样的东西： 此get请求应包含在响应标题中，访问控制允许来源： 我的桶CORS设置如下所示： * 得到 3000 * 正如您所料，没有原始响应头。我在加载web字体时遇到类似问题，当我单击bucket属性中的“添加CORS配置”时，此代码已经存在： * 得到 头 3000 授权 我刚刚点击了save（保存），效果不错，我的自定义网页字体被加载到IE和Firefox中。我不是这方面的专家，我只是认为这可能会帮助您。通常，

是否有人设法将
访问控制允许源站
添加到响应标题中？ 我需要的是这样的东西：
此get请求应包含在响应标题中，
访问控制允许来源：

我的桶CORS设置如下所示：


*
得到
3000
*
正如您所料，没有原始响应头。

我在加载web字体时遇到类似问题，当我单击bucket属性中的“添加CORS配置”时，此代码已经存在： 


*
得到
头
3000
授权
我刚刚点击了save（保存），效果不错，我的自定义网页字体被加载到IE和Firefox中。我不是这方面的专家，我只是认为这可能会帮助您。

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

带有一些默认值。这就是我解决你问题所需要的。只需单击“保存”，然后再试一次，看看它是否有效。如果没有，您也可以尝试下面的代码（来自alxrb答案），这似乎对大多数人都有效


.
fWensche的“答案”与建立CDN是正确的；这样做，我删除了maxagesonds


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




*
得到
授权

如果您的请求没有指定
来源
头，S3将不会在响应中包含CORS头。这真的让我大吃一惊，因为我一直在尝试对文件进行卷曲以测试CORS，但卷曲不包括
Origin
参见上面的答案。（但我也有一个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



//已经有一个html
Chrome已经缓存了另一个版本，并且从未尝试重新获取
crossorigin
版本（即使我在显示的图像上使用了
crossorigin
）

为了解决这个问题，我在为canvas加载图像url时，在图像url的末尾添加了
？crossorigin
（但是您可以添加
？blah
，更改缓存状态是任意的）。请告诉我您是否为CHROME找到了更好的修复方法。这是一个简单的方法。
我知道这是一个老问题，但仍然很难找到解决办法

首先，在一个用Rails 4、曲别针4、CamanJS、Heroku和AWS S3构建的项目中，这对我来说很有用



您必须使用
crossorigin:“anonymous”
参数请求图像


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






将您的站点URL添加到AWS S3中的CORS。这是来自Amazon的参考。基本上，只需转到您的bucket，然后从右侧的选项卡中选择“属性”，打开“权限”选项卡，然后单击“编辑CORS配置””

最初，我将
设置为
*
。只需将该星号更改为您的URL，确保在单独的行中包含
http://
和
https://
等选项。我希望星号接受“All”，但显然我们必须更具体

对我来说就是这样


我尝试了上面的所有答案，但没有任何效果。实际上，我们需要从上述答案中选择3个步骤才能使其生效：


  • 根据Flavio的建议，在您的存储桶上添加CORS配置：
    

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

    

    
*
得到

    • 

  • 在图像上；提及交叉原点：
    

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

    

    

    • 

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

    我找到了这个线程，上面的解决方案都不适用于我的情况。结果是，我只需从我的bucket的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>

    

    
http://www.mywebsite.com/
得到
3000
*

    
胜利：
    

    
http://www.mywebsite.com
得到
3000
*

    
我希望这能帮你省点麻烦
    

  • 在权限设置中为您设置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> 

    

    
*
得到
3000
授权

    • 

  • S3仅当http请求具有
    Origin
    头时才添加CORS头
    • 

  • 默认情况下，CloudFront不向前
    Origin
    header
    
您需要将CloudFront发行版的行为设置中的
    Origin
    标题列为白名单
    • 
我只想补充一下——上面的内容——它解决了我的问题
    
要将AWS/CloudFront分发点设置为torward CORS原点标题，请单击分发点的编辑界面：
    

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

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

    我花了太长时间才弄明白这一点，希望这能节省一些时间。
    我在将3D模型从S3加载到javascript 3D查看器（3D-HOP）中时遇到了类似的问题，但奇怪的是，仅在某些文件类型（.nxs）中
    
为我修正的是更改
    AllowedHeader
    

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

    

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

    

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

    

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

    

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

    

    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 })));
};

    

    <AllowedOrigin>*</AllowedOrigin>

    

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

    

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

    

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

    

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

    

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

    

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

    

      let imagenes = document.getElementsByTagName("img");
    for (let i = 0; i < imagenes.length; i++) {
      imagenes[i].setAttribute("crossorigin", "*");

    

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

    

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

    

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

    

    [
    {
        "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": []
    }
]