带有部分页面加载的 HTML5 History API 后退按钮

Question

为了提高我网站的性能/响应能力，我使用 AJAX、replaceState、pushState 和 popstate 监听器实现了部分页面加载。

我基本上将页面 (HTML) 的中心部分存储为历史记录中的状态对象。单击链接时，我只从服务器请求页面的中心位(使用不同的 Accept header 标识这些请求)并将其替换为 javascript。在 popstate 上，我捕获之前的中央部分并将其推回 dom。

这大部分工作正常，但我发现了一个我遇到的特殊问题。解释起来有点复杂，如果不是很清楚，我深表歉意。

我们的大部分页面上都有一个搜索表单。通过 ajax 加载的部分页面仅针对 GET 请求，表单执行 POST 导致完整页面加载。

如果我浏览以下一组页面，我最终会看到一个格式不正确的部分页面，该页面仅包含中心内容，没有任何周围的 dom:

从主页开始(通过整页加载)- 执行搜索(post-redirect-get)
将您带到搜索结果(通过整页加载)- 然后单击主页
返回主页(通过动态获取)- 单击浏览器返回
搜索结果(来自 popstate 监听器)- 单击浏览器后退
主页格式错误。

当出现格式错误的主页时，我的 popstate 监听器根本不存在。

我认为正在发生的事情是，主页的第二次加载(动态的，部分的)被浏览器缓存，然后当整个页面返回时，浏览器只是显示缓存的部分响应而不是整个页面。

为了尝试解决这个问题，我在响应中添加了一个 Vary: Accept header ，让浏览器知道内容可能会根据 accept header 发生变化。我还在部分加载的内容中添加了 Cache-Control max-age=0、pragma no-cache 和过去的到期日期，以试图强制浏览器不对其进行缓存，但这些都没有解决它。

不幸的是，我的公司不允许外部流量到我们的开发服务器，所以我无法向您展示问题所在。我在这里查看了各种类似的问题，但没有一个看起来完全相同，建议的解决方案似乎也行不通。

如果我向我的动态 GET 请求添加一个无意义的参数 (blah=blah)，问题就解决了。然而，这是一个我不想做的丑陋的 hack。这似乎应该可以通过 header 解决，因为我认为这是一个缓存问题。谁能解释一下这是怎么回事？

Answer 1

这是一个缓存问题。将响应 header Cache-Control 设置为 no-cache 或 max-age=0 后，问题不会在 FF 中发生(如您所说)，但它仍然存在在 Chrome 中。

对我有用的 header 是 Cache-Control: no-store。这并不是所有浏览器都一致实现的(您可以找到询问无缓存和无存储之间有什么区别的问题)，但在 Chrome 中也有您期望的结果。