带有 If-Modified-Since 标头的 S3 存储图像不起作用答案

【问题标题】：S3 stored image with If-Modified-Since header not working带有 If-Modified-Since 标头的 S3 存储图像不起作用
【发布时间】：2016-08-20 10:28:43
【问题描述】：

有没有什么方法可以通过发送 If-Modified-Since 标头将图像从 S3 加载到浏览器中？

它应该在浏览器和 S3 上默认启用，但测试表明每次刷新时都会加载图像。

【问题讨论】：

标签： amazon-web-services browser amazon-s3 http-headers browser-cache

【解决方案1】：

Amazon S3 已经支持 If-Modified-Since 标头，以及相关的 If-None-Match（它使用 ETag 而不是日期）。

因此，仅在图像发生更改时才加载图像的方法是实际使用If-Modified-Since，如果您有 Etag，则使用If-None-Match。但是，由于您正在谈论将其加载到浏览器中，因此大多数浏览器都会这样做，除非您做了一些时髦的事情来禁用浏览器缓存。

有关支持的标头的详细信息，请参阅http://docs.aws.amazon.com/AmazonS3/latest/API/RESTObjectGET.html#RESTObjectGET-requests-request-headers。

您是否遇到过浏览器仍在从 S3 加载图像（即使它们没有更改）的情况？如果是这样，您是否有更多详细信息，例如浏览器、版本和类似Chrome network tab HAR file 的内容？

默认情况下，它应该只适用于双方，没有自定义更改。我刚刚通过将新的 png 图像文件上传到 S3 进行了复制。在一个新的浏览器窗口中，我打开了开发工具并加载了网络选项卡。我确保未勾选“禁用缓存”，并勾选了“保留日志”（以在多次 F5 刷新时保留日志）。

我加载了图像，然后按 F5 重新加载了两次。结果是：

如您所见，第一次加载状态为 200，其他请求收到 304。

【讨论】：

感谢您的回复。实际上我在第一个谷歌上阅读了所有这些信息，但我找不到实施指南。我正在从 php/apache 向浏览器提供 html，并且我在 html 中有图像标签，其中 src 路径通向 S3 存储的图像，所以我没有控制浏览器对 S3 的请求标头。如何启用它们？或者，如果它们默认启用，那么我应该在 S3 端启用什么（图像的元数据等）？
默认情况下它应该在双方（客户端和服务器）上工作。我已经编辑了评论以显示您应该看到的屏幕截图，以及如何复制的描述。您看到什么症状让您认为它没有返回 304？
进一步考虑 - 如编辑中所述，浏览器仍会向 s3 发出请求，并带有 If-Modified-Since 标头。只是 S3 会以没有内容的 304 响应，浏览器将使用它的本地副本。如果您真正想要的是浏览器根本不向 S3 发送任何消息，则需要为 S3 中的每个对象添加一个自定义标头 -
Cache-Control : max-age=100 其中 max-age 是缓存它的秒数。如果您这样做，浏览器将立即使用其本地缓存中的图像，而不向 S3 发出任何请求，直到缓存的副本超过 100 年代。届时它会再次向 S3 发出If-Modified-Since 的请求，S3 会如上以 304 响应。然后浏览器会将其缓存 100 秒等。您可以根据需要设置 max-age。
问题已解决。我错过了几个月前我的同事为图像文件夹路径添加 isLocalhost() 自定义验证的 github 合并，所以当我从 localhost 进行测试时，图像总是从本地文件夹加载，而不是从 s3 存储桶加载，这就是为什么我总是获取代码 200（确定）。实时网站上的测试表明一切正常，并且 s3 成功添加了 If-Modified-Since 标头。废话。感谢您的帮助，如果有人遇到同样的问题，我会留下问题。