多个浏览器选项卡/会话的 Http 缓存控制冲突答案

【问题标题】：Http Cache-Control Clashes with Multiple Browser Tabs/Sessions多个浏览器选项卡/会话的 Http 缓存控制冲突
【发布时间】：2018-08-24 06:13:15
【问题描述】：

我正在使用带有 Hapi NodeJs 后端的 Angular 5。当我在 http 响应中发送“cache-control: private, max-age=3600”标头时，响应被正确缓存。问题是，当我在不同的选项卡中发出完全相同的请求并连接到不同的数据库时，缓存在浏览器选项卡 1 中的数据在它发出相同请求时与浏览器选项卡 2 共享。有没有办法使用缓存控制标头仅在每个应用程序实例中使用缓存？

浏览器选项卡 1 中的相同 Web 应用程序。相同的域。
- 数据库 1
浏览器选项卡 2 中的相同 Web 应用程序。相同的域。
- 数据库 2

【问题讨论】：

你能更详细地描述一下它是什么样的请求吗？为什么存储在不同数据库中的两个资源具有相同的 URI？
我的 Webapp 应该部署在各种设施中，所有设施都有自己的数据库。然而，用户一次在多个数据库中工作的情况并不少见

标签： node.js angular http hapijs http-caching

【解决方案1】：

用户代理需要以某种方式区分这些缓存条目。可能您最好的选择是调整缓存条目键（将标识数据库的子域、路径或查询参数添加到 URI）。

您还可以使用自定义 HTTP 标头（例如 X-Database），与 Vary HTTP 标头配对使用，但在这种情况下，用户代理一次只能存储单个响应，因为它仍然使用 URI 作为缓存键和Vary 仅用于响应验证的 HTTP 标头。相关摘自The State of Browser Caching, Revisited Mark Nottingham 的文章：

我看到的一个小问题是 所有测试过的浏览器缓存一次只能存储一个变体； 即，如果您的响应包含 Vary: Foo 并且您收到两个请求，第一个带有 @987654328 @ 和第二个带有Foo: 2，第二个响应将从缓存中驱逐第一个。

这是否有问题取决于您如何使用Vary；如果您想重用具有旧值的缓存响应，则可能会降低效率。但是，这似乎不是一个常见的用例；

有关更多信息，请查看RFC 7234 Hypertext Transfer Protocol (HTTP/1.1): Caching 和Understanding The Vary Header Andrew Betts 的文章

【讨论】：