Search code examples
google-chromehttpbrowser-cachecache-control

Browser loads JS files from cache, but not CSS files

When navigating my site, my browser is loading the JS files from cache, but not the CSS files. This happens both running a local server and on the live site (to me and apparently to other users, which is apparent since the logs show mostly .css files getting loaded).

I've tried the other solutions (example): I am clicking around on hyperlinks (not refreshing) and my Chrome Devtools do not have "Disable Cache" checked.

Here is the initial request (using CTRL+F5 for a hard refresh):

enter image description here

Then navigating back to that page creates another request:

enter image description here

(Note: there is no Cache-Control sent in the second request, proving that I indeed did not refresh)

As expected, the server responds with a 304 Not-Modified for the .css file, but I don't understand why it's making a trip to the server at all (notice below the .js file is retrieved without a server request).

enter image description here

I believe you can look at the issue first-hand on your own machine by going to https://up.codes. I'm using Chrome 71.0.

Why are the CSS files not being cached?

Solution

  • Your server responded with different session cookie when requesting these css files, and your header set with Vary: Cookie, which caused the browser to send request again because of the session cookie change.