Same URL rendering different content

Question

We have a CSS file hosted on cloudfront. Whenever the file is updated we add a version number to the file. We also have VPN in our office through which we connect to QA servers.

Now a very peculiar thing is happening. When VPN tunnel is enabled and that CSS file link is hit from the browser I see updated file. But if I turn off VPN and hit the URL then I see previous version of the file. Though URLremains same for both times when I hit the URL. I'm not able to understand how VPN could affect loading the latest file version. I tried clearing cache from the browser but every time this is happening.

Any ideas on this? What could be the problem.

Answer 1

One of the problems could be that you're behind a proxy which caches data. The VPN bypasses proxies so you get the new file but the proxy will be serving old content to your browser. Mind that a proxy can also be transparent (invisible) so you won't even know that you're behind a proxy unless you specifically look into it.

Answer 2

Try adding some cache-busting headers to a custom request with the VPN turned off, and see if you get the new file:

$ curl -H "Cache-Control: no-cache" http://your.web.site/style.css

If you do, inspect the Cache-Control response header to see what it says (use --head on a new request or --dump-header <file> with the one above).

---

My CSS files are cached for 1 year. What I do to get around possible caching proxies is this:

RewriteRule ^/css/[0-9+]/(.*) /css/$1 [NC,L]

Then I change the URL in the HTML file every time I make a change that requires users to use the new CSS (non-breaking changes such as tweaking a shadow to make it look prettier, I don't update the revision number):

<link rel="stylesheet" href="/css/456/default.css">