link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

S3 CORS，总是发送Vary。原产地

22 人关注

我在Cloudfront后面使用一个S3桶，并启用了CORS。如果客户端发出带有Origin头的请求，那么S3（和Cloudfront）就会以 "Vary:Origin "头，但如果请求没有Origin，头，那么响应不包含任何Vary头。

这是有问题的，因为我在img标签中使用了来自cloudfront/s3的资源，在这种情况下，浏览器在没有Origin头的情况下发出了请求，然后又对上述图片发出了ajax请求。浏览器就会使用图片的缓存版本，没有Access-Control-Allow-Origin头，因此拒绝了请求。

有什么方法可以让S3总是返回 "Vary:Origin "头？

1 个评论

Kristian Hanekamp ：

该问题在 AWS论坛上也有报告

amazon-s3

cors

amazon-cloudfront

Thayne

发布于 2015-07-31

3 个回答

drdrek

发布于 2021-09-11

0 人赞同

我开了一个账户就是为了回答你的问题，因为对于这种问题（以及一些相关的问题），周围很少有好的答案。

你所描述的问题主要发生在chrome中，FF和IE似乎很聪明，在这些情况下不会在AJAX和常规调用之间共享缓存。

让我们首先为未来的读者描述一下问题发生的原因。

浏览器（Chrome）使用一个普通的


            
             <img>

或


            
             <script>

标签询问服务器。如果服务器是在同一个域中，它不包括CORS头。

服务器（S3）返回资源。如果请求中没有Origin头，它不会在回复中附加CORS头，因为它们是多余的。

浏览器（Chrome）尝试使用AJAX再次获取资源，但这次并没有真正进入服务器，而是查看了缓存的资源。

浏览器（Chrome）的缓存版本没有CORS头。它将以违反Access-Control-Allow-Origin或其他相关问题为由放弃该请求。

在HTML5中，有一个叫做 crossorigin 的属性，可以被添加到标签中，以表示它们需要发送来源信息。可能的值是 crossorigin='anonymous' 和 crossorigin='use-credentials' ，这些都与所问问题无关，但正如文档中所说。

默认情况下（也就是说，当没有指定属性时），根本不使用CORS。

https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes

因此，只需像这样创建你的图像标签 <img src='cloundfront.path' crossorigin='use-credentials'> 即可。

就这样吧。它相当晦涩难懂，所以我希望这个答案能够为一群人节省一些研究时间。

Jeremy T ：

我认为


             
              crossorigin="use-credentials"

等同于在XHR请求中调用


             
              withCredentials

，这是否正确？如果是这样的话，


             
              crossorigin="anonymous"

是否也能保证返回 CORS 头信息？如果可以的话，我不想让我的静态图像做像设置cookies这样的事情。

theHarsh ：

在我们的Chrome扩展中，这个缓存问题让我很头疼。特别是在有CORS的Chrome扩展中，要考虑的东西太多了。这个答案很清楚，帮助我们找到了问题所在。谢谢你😊。另外，作为参考，如果你想避免图像属性的


             
              crossorigin

，你可以用


             
              cache:no-store

做一个


             
              fetch

请求，这将绕过缓存。

JoeMoe1984 ：

我同意@JeremyT的观点，我认为对于静态资产来说，


             
              crossorigin="anonymous"

是更可取的方法。这就是我在启用cors的情况下获取缓存图片时的问题所在。

Kristian Hanekamp

发布于 2021-09-11

已采纳

0 人赞同

另一个解决方案是配置你的CloudFront分布，以自动将非CORS请求变成CORS请求。这可以通过使用最近添加的CloudFront功能 "控制边缘到原点请求头"，在CloudFront发送给S3的每个请求中添加一个CORS头来实现。

请看这里的功能公告： https://aws.amazon.com/blogs/aws/cloudfront-update-https-tls-v1-1v1-2-to-the-origin-addmodify-headers/