Amazon S3 + CloudFront CORS 问题答案

【问题标题】：Amazon S3 + CloudFront CORS issueAmazon S3 + CloudFront CORS 问题
【发布时间】：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-Headers、Access-Control-Request-Method 和 Origin 标头转发到 S3（在“缓存行为”中）？在使用邮递员进行测试时，您是否发送了 Origin: 标头（和其他标头）？可以显示网址吗？
@Michael-sqlbot 谢谢，CloudFront 分发转发标头解决了这个问题。请提交作为答案，我会投票并将其标记为已解决。

标签： javascript amazon-s3 cors amazon-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://stackoverflow.com/a/67929204/5657783

【讨论】：