Chrome is not caching JS and CSS

Question

I am running an expressjs server and tested caching in Chrome and Firefox. The headers are shown after the questions.

Could anyone tell me why Chrome is not caching JS and CSS files?
How to make Chrome cache the files?

Chrome request headers (initial and repeated):

GET /js/app.js HTTP/1.1
Host: 10.64.30.105
Connection: keep-alive
Accept: */*
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.80 Safari/537.36
Referer: https://10.64.30.105/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8,zh-CN;q=0.6,zh;q=0.4

Chrome response headers (initial and repeated):

HTTP/1.1 200 OK
Access-Control-Allow-Origin: 
Access-Control-Allow-Credentials: 
Access-Control-Allow-Methods: 
Access-Control-Allow-Headers: 
Accept-Ranges: bytes
Date: Thu, 12 Nov 2015 22:16:57 GMT
Cache-Control: public, max-age=31536000
Last-Modified: Thu, 12 Nov 2015 16:02:47 GMT
ETag: W/"XsMH2eh+CkXmU96uopajGg=="
Content-Type: application/javascript
Vary: Accept-Encoding
Content-Encoding: gzip
Connection: keep-alive
Transfer-Encoding: chunked

The same request is cached in Firefox.

Firefox initial request headers:

GET /js/app.js HTTP/1.1
Host: 10.64.30.105
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:42.0) Gecko/20100101 Firefox/42.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Referer: https://10.64.30.105/
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache

Firefox initial response headers:

HTTP/1.1 200 OK
Accept-Ranges: bytes
Date: Thu, 12 Nov 2015 22:30:27 GMT
Cache-Control: public, max-age=31536000
Last-Modified: Thu, 12 Nov 2015 16:02:47 GMT
Etag: W/"XsMH2eh+CkXmU96uopajGg=="
Content-Type: application/javascript
Vary: Accept-Encoding
Content-Encoding: gzip
Connection: keep-alive
Transfer-Encoding: chunked

did you find a solution? – user3658423 Nov 18 '15 at 18:22 — user3658423, Nov 18 '15 at 18:22
nope... no solution so far – user2255895 Nov 20 '15 at 17:19 — user2255895, Nov 20 '15 at 17:19

score 0 · Answer 1 · edited May 23 '17 at 10:32

There is a problem with gzipped resources like .js .css and the Vary: Accept-encoding Header with Chrome.

Please check my Anwser given here: https://stackoverflow.com/a/40726246/135785

This solved the problem for me:

    <FilesMatch "(\.js\.gz|\.css\.gz)$">
  # Serve correct encoding type.
  Header set Content-Encoding gzip
  # Force proxies to cache gzipped & non-gzipped css/js files separately.
  BrowserMatch "Chrome" ChromeFound
  Header append Vary Accept-Encoding env=!ChromeFound
</FilesMatch>

Check your Apache Config for "Header append Vary Accept-Encoding"

Chrome is not caching JS and CSS

1 Answers1