Axios GET 请求忽略响应 Cache-Control max-age

Question

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

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

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 headers:

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

它再次忽略缓存数据。

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

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

Answer 1

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

如果担心请求未根据服务器的 Cache-Control 响应进行缓存 headers，可以将请求 URI 粘贴到新选项卡的地址栏中并验证页面从浏览器缓存加载。

详细解释见这个问题：

Why do AJAX GET requests sent from the mounted hook in Vue.js always ignore the browser cache?

Axios GET 请求忽略响应 Cache-Control max-age

Axios GET requests ignoring response Cache-Control max-age

javascript

cache-control

vue.js

axios

max-age