Amazon S3 + CloudFront CORS 问题

Posted

技术标签:

【中文标题】Amazon S3 + CloudFront CORS 问题【英文标题】:Amazon S3 + CloudFront CORS issue 【发布时间】:2017-12-30 02:44:44 【问题描述】:

我们使用 Amazon S3 + CloudFront 来提供 JSON 文件。我们上传了两个文件,让我们将其视为 j1.json 和 j2.json。这两个文件最初都在响应中响应了有效的 CORS 标头,但是当在 j2.json 上运行失效时,它的标头响应发生了变化,我们面临着 CORS 问题。

在 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>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

j1.json 的响应标头

j2.json 的响应标头

两个 JSON 文件在同一个存储桶中,但 j2.json 响应缺少这些标头

Access-Control-Allow-Methods →GET
Access-Control-Allow-Origin →*
Access-Control-Max-Age →3000

我们尝试删除并再次上传对象,它没有响应响应中的 CORS 标头。这个问题的可能原因是什么?又该如何解决呢?

【问题讨论】:

清除浏览器缓存并在其他浏览器中尝试。发生这种情况时最可能的解释是文件的过时缓存副本 @sideshowbarker 我们已经尝试过不同的浏览器,清除缓存并重新加载。邮递员也一样。到目前为止没有运气。 CloudFront 分配是否配置为将 Access-Control-Request-HeadersAccess-Control-Request-MethodOrigin 标头转发到 S3(在“缓存行为”中)?在使用邮递员进行测试时,您是否发送了 Origin: 标头(和其他标头)?可以显示网址吗? @Michael-sqlbot 谢谢,CloudFront 分发转发标头解决了这个问题。请提交作为答案,我会投票并将其标记为已解决。 【参考方案1】:

在 S3 将返回正确的 CORS 响应标头之前,它需要看到该请求是一个 CORS 请求。

默认情况下,CloudFront 将尽可能少的标头转发到源,因为源需要的标头越少,您的缓存命中率往往就越高(因为任何未发送到源的标头都不会导致源来改变其响应,因此对给定请求的所有响应都不会改变,因此是可缓存的)。但是对于 CORS 请求,我们需要 S3 来查看一些特定的标头,以便它能够做出相应的反应。

在缓存行为配置中,您需要将这 3 个请求标头列入白名单以转发到源。

Access-Control-Request-Headers
Access-Control-Request-Method
Origin

此更改完成后,也可能需要进行失效。

【讨论】:

【参考方案2】:

只是添加到'Michael - sqlbot'的答案,现在似乎还需要将Allow-Control-Allow-Origin标头列入白名单。它可能不会显示在下拉列表中;那么你需要输入它!

我还附加了其他有助于我使其正常工作的配置,可能会对某人有所帮助:https://***.com/a/67929204/5657783

【讨论】:

以上是关于Amazon S3 + CloudFront CORS 问题的主要内容,如果未能解决你的问题,请参考以下文章

为啥需要 Amazon S3 和 Cloudfront?

Amazon S3 是不是向 CloudFront 发送失效信号?

Amazon S3 Cloudfront 部署最佳实践

使用 Amazon S3 和 Cloudfront 的 CORS

Amazon S3 重定向和 Cloudfront

Gzip 与 Amazon S3/Cloudfront 失败