繁体   English   中英

S3 - 访问控制允许来源 Header

[英]S3 - Access-Control-Allow-Origin Header

有没有人设法将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" />

此获取请求应包含在响应中,header, 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响应 header。

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

有关更多信息,您可以阅读有关Editing Bucket Permission 的这篇文章。

我在加载 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> 

我只是点击了保存,它工作得很好,我的自定义网络字体正在 IE 和 Firefox 中加载。 我不是这方面的专家,我只是想这可能会帮助你。

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

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

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

如果您的请求未指定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 错误)

不要在 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 修复程序,请告诉我

我将添加到这个答案 -以上 - 解决了我的问题。

要将 AWS/CloudFront Distribution Point 设置为朝向 CORS Origin Header,请单击 Distribution Point 的编辑界面:

在此处输入图片说明

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

在此处输入图片说明

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

为我修复的是在 CORS 配置AllowedHeader从默认Authorization更改为*

<?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 标头。

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

我到达了这个线程,结果证明上述解决方案都不适用于我的案例。 事实证明,我只需要从存储桶的 CORS 配置中<AllowedOrigin> URL删除尾部斜杠<AllowedOrigin>

失败:

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

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

我尝试了上面的所有答案,但没有任何效果。 实际上,我们需要将上述答案的 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。

首先,激活 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", "*");
  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标头列入白名单。

我修复了它,写了以下内容:

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

这个配置为我解决了这个问题:

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

fwuensche "answer" 是建立 CDN 的正确方法; 这样做,我删除了 MaxAgeSeconds。

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

在最新的 S3 管理控制台中,当您单击权限选项卡上的 CORS 配置时,它将显示默认示例 CORS 配置。 这种配置其实并不活跃,但是! 您必须先单击保存才能激活 CORS。

我花了很长时间才弄明白这一点,希望这能节省一些时间。

警告 - 黑客。

如果您使用 S3Image 显示图像并随后尝试通过 fetch 获取它,也许将其插入 PDF 或进行其他处理,请注意 Chrome 将缓存不需要 CORS 预检请求的第一个结果,并且然后尝试在没有预检 OPTIONS 请求的情况下获取相同的资源,并且由于浏览器限制而失败。

解决此问题的另一种方法是确保 S3Image 包含如上所述的 crossorigin: '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>

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

S3 现在需要 Javascript Object 符号格式。

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

我建议根据您的要求更改 AllowedOrigins 和 AllowedMethods。

接受的答案有效,但似乎如果您直接转到资源,则没有跨域标头。 如果您使用的是 cloudfront,这将导致 cloudfront 缓存没有标题的版本。当您转到加载此资源的不同 url 时,您将遇到此跨域问题。

就我而言,我首先使用以下配置解决它,转到权限,然后转到跨域资源共享(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": []
    }
]

单击此处了解更多信息

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

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

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

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

原来我不得不纠正

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

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

(注意 URL 中的最后一个斜杠)

希望这有助于某人

上面的大多数答案都不起作用。 我试图使用 react-s3 将图像上传到 S3 存储桶,我得到了这个

跨域请求被阻止

错误。

您所要做的就是在 s3 Bucket 中添加 CORS Config 转到 S3 Bucket -> 权限 -> 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 设置

我遇到了类似的问题, coderVishal 的回答帮助我解决了这个问题,但就我而言,我需要使用具有下一个配置的 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参数的信息。

对我来说,不添加区域

const s3 = new aws.S3({ apiVersion: '2006-03-01', region: 'us-west-2' });

当前的答案已经过时了。 所以这里是我的分享:

首先,您需要在 AWS S3 存储桶上设置 CORS

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE",
            "HEAD"
        ],
        "AllowedOrigins": [
            "http://*",
            "https://*"
        ],
        "ExposeHeaders": [
            "Access-Control-Allow-Origin",
            "ETag"
        ],
        "MaxAgeSeconds": 3000
    }
]

只是关于 S3 的 CORS 的注释。 应用策略时,存储桶中已有的文件不会更新。 因此,请确保仅将 CORS 策略应用于新存储桶,或在应用策略后重新添加内容。 旧内容不会受到新 CORS 政策的影响

亚马逊 S3 如何评估 CORS?

  • 请求的 Origin 标头必须与 AllowedOrigin 元素匹配。
  • 在预检 OPTIONS 请求的情况下,请求方法(例如,GET 或 PUT)或 Access-Control-Request-Method 标头必须是 AllowedMethod 元素之一。
  • 预检请求的请求的 Access-Control-Request-Headers 标头中列出的每个标头都必须与 AllowedHeader 元素匹配。

对于最后一步,您还需要清除浏览器上的缓存,因为浏览器可能会缓存以前的飞行前请求

我尝试了很多解决方案来解决这个问题,但最后,我只是这样做了

url.replace(/^https:\/\//i, "http://");

我不知道为什么,但这对我有用。 如果您要从 s3 存储桶中以“BLOB”的形式获取图像,请执行此操作。

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

下面的配置等同于顶部的配置,但采用数组的形式。

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM