3

我已将服务器响应配置为包含Cache-Control: max-age=<some number>在多个端点上。我在前端使用 Axios 在这些端点上发出 AJAX 请求。当我刷新页面时，从浏览器缓存中正确提取了一些请求，但其中两个总是再次访问服务器。

拒绝从缓存中提取的两个请求总是相同的。
我检查了浏览器缓存，响应确实被缓存了。
Axios 添加max-age=0了两个有问题的请求的标头，但没有添加其他三个，如果我向 Axios 请求添加自定义标头：

let payload = {params: {cik: 999}, headers: {'Cache-Control': 'max-age=9999'}};
axios.get('/api/13f-holdings/filer/historical', payload).then((resp) => {
    // handle response
});

该请求通过以下Cache-Control标头进行：

Cache-Control: max-age=9999, max-age=0

它再次忽略缓存的数据。

鉴于有问题的响应实际上是由浏览器缓存的，问题似乎出在 Axios 请求上。但是命中缓存的请求看起来与缺少缓存的请求完全相同。如果我可以提供任何其他信息来帮助诊断，请告诉我。

编辑：我正在使用 VueJS。我注意到，在 Vue 组件挂载后，两个从未访问浏览器缓存的请求被触发。这很重要吗？Vue 在组件安装后是否无法立即访问浏览器缓存？

4

1 回答 1

1

这种行为与浏览器开发人员在页面刷新时选择加载数据的方式有关，并且在很大程度上不受网站开发人员的控制。

如果有人担心请求没有根据服务器的Cache-Control响应标头被缓存，则可以将请求 URI 粘贴到新选项卡的地址栏中，并验证页面是否从浏览器缓存中加载。

有关详细说明，请参阅此问题：

为什么 Vue.js 中从挂载钩子发送的 AJAX GET 请求总是忽略浏览器缓存？

于 2021-01-10T08:53:52.130 回答