I have set Cache control in my response header as Cache-Control:public, max-age=86400
. But when I try to refresh page or open a new tab, it always hits my server. The response status I got is 200, server log is appeared for this request also I checked chrome://cache/
this request is not in the list. I already looked some similar SO questions cache-control not working without etag and why cache-control:max-age don't work?. But still with no luck. Tested on chrome 56.
-
Are you also sending a Last-Modified and/or ETag header in the response?– mwpCommented Mar 7, 2017 at 23:26
-
No, I didn't. As my understanding ETag is for validating same content on server to save bandwidth? But I don't want browser to make a request in the first place if cache is not expired.– MengoCommented Mar 7, 2017 at 23:33
-
I have the same problem, In my case i have a reverse proxy in place , which sets cache control to response headers . Although the headers get applied .chrome still hits the server– Jeson DiasCommented Jul 14, 2017 at 11:03
-
Typical trap: Inspecting with chrome/firefox/etc. devtools disables the cache. Make sure that "Disable Cache" is not checked.– Karsten S.Commented Sep 25, 2019 at 11:24
-
When you press Refresh (F5) then cache is cleared. Check more detailed answer here stackoverflow.com/questions/10518493/…– Sergey PonomarevCommented Aug 8, 2020 at 16:29
5 Answers
Chrome disables cache when DevTools is open, or at least it does Chrome 59. Open DevTools, go to Network, uncheck "Disable cache" at the top. Now you should be able to refresh the page and see it in chrome://cache.
-
3It is unchecked and I also tried with firefox 51 with dev-tool closed. Still not working...– MengoCommented Mar 7, 2017 at 23:51
-
How are you testing it? In many browsers, refreshing the page forces a revalidation, and because you are not using Last-Modified/ETag, every revalidation will trigger a full 200 response. Chrome was doing this when I would select the location and hit enter even though I can see the page in chrome://cache.– mwpCommented Mar 7, 2017 at 23:54
-
Cache-Control response header will not work for page refresh. Try making that request twice without refreshing the page, then you will see it being cached (the request won't reach your server internally). To achieve what you want you might have to cache your request by accessing localStorage, or just cache it through a back-end caching library.
Cache control tells your browser (and proxy servers like Squid) what resources it cannot cache. But it does not force your browser to cache a resource.
I recommend to check the error_logs to see if you really go to the backend, or stay in the browser.
In my case, browser gives me 200OK in the console logs but I don't reach the back end according to the error_log ...
Confirm your cross origin isolation
status and crossorigin
attribute, it will affect HTTP cache (disk cache, memo cache).
Test by:
function addImgTag(src) {
var head = document.getElementsByTagName('head')[0];
var img = document.createElement('img');
// add and remove below crossorigin to see if cache works
img.setAttribute('crossorigin', 'anonymous')
img.src = src;
head.appendChild(img);
}
addImgTag('https://st2.zoom.us/static/6.3.13625/image/new/topNav/Zoom_logo.svg')
References: