javascript - Axios GET requests ignoring response Cache-Control max-age

Question

I've configured my server responses to include Cache-Control: max-age=<some number> on several endpoints. I'm using Axios on the front end to make AJAX requests on these endpoints. When I refresh the page a few requests are properly pulled from the browser cache but two of them always go to the server again.

It's always the same two requests which refuse to pull from the cache.
I checked the browser cache and the responses are indeed cached.
Axios adds max-age=0 in the headers of the two problematic requests but not the other three and if I add a custom header to the Axios request:

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

The request goes through with the following Cache-Control headers:

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

and it ignores the cached data again.

Given that the responses in question are in fact being cached by the browser it seems that the problem lies in the Axios request. But the requests hitting the cache look exactly the same as the requests missing the cache. Let me know if I can provide any additional information to help diagnose this.

Edit: I'm using VueJS. I noticed that the two requests that never hit the browser cache are fired after the Vue component has mounted. Is this significant? Does Vue not have access to the browser cache immediately following component mounting?

question from:https://stackoverflow.com/questions/65649378/axios-get-requests-ignoring-response-cache-control-max-age

Answer 1

This behaviour has to do with the way browser developers choose to load data when a page is refreshed and is, to great extent, out of the hands of the website developer.

If one is concerned that the request is not being cached according to the server's Cache-Control response headers one may paste the request URI in the address bar of a new tab and verify that the page is loaded from the browser cache.

See this question for a detailed explanation:

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