Browser loads JS files from cache, but not CSS files

@Allen found the issue (Vary header included cookie and the cookie was changing between requests), but I'll show how to fix it for the case of Flask for posterity. You can use Flask's @app.after_request() hook to make sure Flask does not add cookie when it hits this line:

@app.after_requestdef add_header(response):    url = request.url    if ('.css' in url or '.js' in url or '.svg' in url or '.png' in url or        '.gif' in url) :        # Flask adds to the header `Vary: cookie` meaning the client should         # re-download the asset if the cookie changed.  If you look at the Flask        # source code that comes next after the below return, it will add         # `Vary: cookie` if and only if session.accessed is true.        session.accessed = False    return response

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.

Check out for your web.config's compilation attribute, if its:

<compilation debug=”true”/> 

CSS will get continually downloaded by clients on each pageview request and not cached locally within the browser.

If its set to false, the resource is only downloaded once to the client and cached there.

Check out this post: Chrome will not cache CSS files. .js files work fine