为什么 Chrome 会报告过时的响应标头？答案

【问题标题】：Why is Chrome reporting outdated response headers?为什么 Chrome 会报告过时的响应标头？
【发布时间】：2018-07-07 10:56:10
【问题描述】：

使用 TomCat 为网站提供服务。通常，当我更新网站时，Chrome 会对缓存感到困惑，并继续使用缓存中的旧页面，即使有更新的页面可用。这似乎是基于一个更根本的问题，即 Chrome 也没有从服务器获取最新的响应标头，这似乎阻止了任何控制缓存的能力。

我选择了一个 javascript 文件，做了一个小的修改来更改文件系统中文件的日期。然后我在 Mozilla 和 Chrome 中重新获取了该页面。 Mozilla 似乎运行正确：服务器返回 200，最重要的是 Last-Modified 标头与文件上的时间戳表示相同的内容。

但是，Chrome，我得到了最奇怪的回应。它声称得到 200 响应，但它不刷新其缓存。根据 Chrome，Last-Modified 标头是几个月前的！我在提供文件的非常基本的模式下使用 TomCat——没有涉及我的特殊代码。我真的不相信 TomCat 会向 Chrome 返回不同的标头。

看起来 Chrome 甚至从不询问服务器。我在服务器上找不到该文件请求的任何记录。似乎 Chrome 只是坐在缓存文件中，从几天前的 fetch 中报告旧的标头。它没有向服务器请求标头，也没有发送 304。它根本不调用服务器。

我从报告返回的标头的 HTTP 测试工具中进行了第三次提取。以这种方式检索的标头与 Mozilla 报告的标头匹配，但与 Chrome 报告的标头不匹配。 Chrome 似乎已经缓存了之前的标头响应，因此不会下载修改后的文件。

甚至 ETag 标头也不同。 Mozilla 和测试工具报告了 W/“464427-1517160284971”的 ETag 标头，但 Chrome 声称响应包含 W/“464400-1511152262000”的 ETag 值。我根本不相信服务器返回了那个值。

我一直在努力解决用户必须清除 Chrome 上的缓存的问题，这已成为一个真正的问题。有什么方法可以在页面被修改时强制 Chrome 刷新缓存，而不会破坏每个人的网络性能。

这里是 Mozilla 标头

这是 Chrome “报告”的标题

这是测试工具标题。

【问题讨论】：

它说“来自内存缓存”。你知道 Chrome 是否真的在发出请求吗？
没有。 Chrome 似乎根本没有向服务器发出请求。 Mozilla 将请求并获得 304 响应。不过Chrome好像连问都不问。

标签： google-chrome caching http-headers

【解决方案1】：

解决方案似乎是将选项 must-validate 添加到 Cache-Control 响应标头。如果没有这个头部，也没有其他特定时间的命令来释放缓存的文件，Chrome 会永远缓存文件，不会返回服务器检查是否有更新的文件。

默认情况下，Apace TomCat 不会在响应的 Cache-Control 标头中包含 must-validate。这就是为什么在 TomCat 上使用默认设置，Chrome 将永远缓存文件。这很奇怪，因为它看起来像是获取了文件，但实际上并没有，并且它报告了几天前检索文件时的 HTTP 响应 (200)。

在 TomCat 中，向响应中添加标头的唯一方法是编写一个对每个请求执行此操作的类。这是一个合适的类：

public class HeaderCorrectingFilter implements Filter {

    public void destroy() {
        //nothing to destroy
    }

    public void doFilter(ServletRequest request, ServletResponse response,
            FilterChain chain) throws IOException, ServletException {
        ((HttpServletResponse) response).setHeader("Cache-Control", "must-revalidate");
    }

    public void init(FilterConfig arg0) throws ServletException {
    }

}

这是 WEB.XML 中的设置，以使其被调用

<filter>
  <filter-name>HeaderCorrectingFilter</filter-name>
  <filter-class>com.example.HeaderCorrectingFilter</filter-class>
</filter>
<filter-mapping>
  <filter-name>HeaderCorrectingFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

这里是blog post，里面填写了制作方法的详细信息

【讨论】：