Question

I am debugging js code on localhost and I need to prevent the caching of files by the browser. I can’t use a timestamp appended to the url because it erases chrome debugger breakpoints.

Usually I don’t have to refresh the cache, but everyone in a while I do. It is a large problem because I go searching elsewhere for the bugs. I added this code to apache some time ago:

    <IfModule mod_headers.c>
            Header add Expires "Sun, 19 Nov 1978 05:00:00 GMT"
            Header add Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0"
    </IfModule>

Can someone explain why Apache would mistake a file for valid or provide some additions to the configuration code that could fix this once and for all?

Headers using the solution below:

<IfModule mod_expires.c>
  expiresActive On
  ExpiresDefault "access plus 1 seconds"
  ExpiresByType text/html "access plus 1 seconds"
  ExpiresByType text/javascript "access plus 1 seconds"
  ExpiresByType application/x-javascript "access plus 1 seconds"
</IfModule>

http://localhost/static/images/%d0%9a%d0%be%d0%bf%d0%b8%d1%8f%20logo_inner.png

GET /static/images/%d0%9a%d0%be%d0%bf%d0%b8%d1%8f%20logo_inner.png HTTP/1.1
Host: localhost
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:16.0) Gecko/20100101 Firefox/16.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Connection: keep-alive
Referer: http://localhost/static/images/
Cache-Control: max-age=0

HTTP/1.1 200 OK
Date: Sun, 23 Dec 2012 19:33:20 GMT
Server: Apache/2.2.22 (Ubuntu)
Last-Modified: Thu, 28 Jun 2012 17:32:51 GMT
Etag: "b3c27-f1f-4c38bb88d96c0"
Accept-Ranges: bytes
Content-Length: 3871
Expires: Sun, 19 Nov 1978 05:00:00 GMT
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Keep-Alive: timeout=15, max=99
Connection: Keep-Alive
Content-Type: image/png



HTTP/1.1 200 OK
Date: Sun, 23 Dec 2012 19:33:54 GMT
Server: Apache/2.2.22 (Ubuntu)
Last-Modified: Thu, 28 Jun 2012 17:32:51 GMT
Etag: "b3c27-f1f-4c38bb88d96c0"
Accept-Ranges: bytes
Content-Length: 3871
Cache-Control: max-age=1
Expires: Sun, 23 Dec 2012 19:33:55 GMT
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Content-Type: image/png




The second request:

http://localhost/static/images/%d0%9a%d0%be%d0%bf%d0%b8%d1%8f%20logo_inner.png

GET /static/images/%d0%9a%d0%be%d0%bf%d0%b8%d1%8f%20logo_inner.png HTTP/1.1
Host: localhost
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:16.0) Gecko/20100101 Firefox/16.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Connection: keep-alive
Referer: http://localhost/static/images/
If-Modified-Since: Thu, 28 Jun 2012 17:32:51 GMT
If-None-Match: "b3c27-f1f-4c38bb88d96c0"
Cache-Control: max-age=0

HTTP/1.1 304 Not Modified
Date: Sun, 23 Dec 2012 19:34:58 GMT
Server: Apache/2.2.22 (Ubuntu)
Connection: Keep-Alive
Keep-Alive: timeout=15, max=99
Etag: "b3c27-f1f-4c38bb88d96c0"
Expires: Sun, 23 Dec 2012 19:34:59 GMT
Cache-Control: max-age=1

Answer 1

When delivering static files, Apache sends an ETag header, which is something like a checksum of the file. The browser will cache the file and remember the ETag, which is sent with the next request.

If the file changes the browser ETag should differ and the webserver should resend, when the etag is equal, the webserver will respond with 304 Not Modified. The ETag mechanism has a higher priority than other cache headers.

To disable etags you can use apaches

FileETag None

http://httpd.apache.org/docs/current/en/mod/core.html#fileetag

Wikipedia has a nice article about the Etag header
http://en.wikipedia.org/wiki/HTTP_ETag

Edit

This should be a waterproof configuration

FileETag None
<ifModule mod_headers.c>
    Header unset ETag
    Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</ifModule>

Don’t forget that configuration changes require a server restart to take effect.

sudo /etc/init.d/httpd restart

EDIT2

Wrap filesMatch around the configuration to disable caching for specific file extensions only

<filesMatch ".(php|js|css)$">
    FileETag None
    [..]
</filesMatch>