JavaScript getting cached, clearing cache not working

I deployed my app (node.js) on AWS, with Cloudflare in front to apply CDN + domain + SSL. It works great, except when I need to update client-side JS. I redeploy source to AWS, rebuild using webpack, and restart the server.

Then I visit AWS url directly, the changes take effect as expected. When I visit same app via Cloudflare-linked domain, however, I’m seeing updates to HTML files take place but not the webpack JS I’ve rebuilt, which seems to be cached by something. I went to “Caching” in Cloudflare several times, purged all cache, confirmed that there was nothing left in Cloudflare by taking down the AWS and observing that I get 502 error on Cloudflare, as expected. When I bring AWS back up (with new webpack JS, and navigate to the app again via Cloudflare URL, I once again see the same stale webpack JS file being used, despite AWS url serving the new file and SSHed into AWS box showing no signs of stale webpack JS file anywhere.

I tried clearing Chrome cache and starting in Incognito mode as well, no effect. My current workaround is to keep prefixing the webpack JS file with numbers to force no-cache, which I don’t like. Based on above test, the cache problem does not seem to be on AWS side, but with something related to Cloudflare.

Please dont say now you dont have a certificate on your server.

What do you mean by JavaScript is getting cached? JavaScript files or HTML content generated by your JavaScript code? The former should not be cached, the latter is naturally cached. Whats the URL?

The Cloudflare url is investomation.com, the AWS url is https://ec2-3-17-135-23.us-east-2.compute.amazonaws.com/, it has the Cloudflare-provided free SSL installed on it for now (which afaik is only good when connection is from Cloudflare, not directly via the AWS URL).

You can see the problem by hovering over the sliders on the left side of the page, on AWS it creates an explanation box on hover, on Cloudflare it uses stale client.js file that does not yet have this functionality. This stale file is about 2 days old now.

I take it you are referring to https://investomation.com/client.js.

That file is cached, but that must be because of a page rule. Can you post a screenshot of your page rules?

As for the certificate, so you mean a Cloudflare origin certificate? If you have that, ignore my earlier comment :wink:

Yes, it’s the origin certificate. I don’t seem to have any page rules:

Also, the relevant portion of my DNS config looks like this (can’t post both screenshots in 1 post as a new member):

That is slightly strange. A .js file should not be cached by default but only if there is a page rule present, which does not seem to be the case here. Are you possibly working with Cloudflare workers?

Workers are empty as well, also you’re correct, it’s the following file:
https://ec2-3-17-135-23.us-east-2.compute.amazonaws.com/client.js
https://investomation.com/client.js

If you visit both, you’ll notice their contents don’t match, even though it’s the same file.

For me it works, as my Cloudflare PoP did not have the file cached.

I would suggest you open a support ticket, maybe they can shed some light. Also, once you have a ticket number post it here.

For the time being you could implement a workaround and append for each request a random query string where you embed the file. In this way it should always bypass the cache.

So your statement of seeing the correct file implied that the issue wasn’t in Cloudflare but closer to me (i.e. Chrome, despite clearing the cache). For some reason it went away only after I rebooted my machine. Sorry for the false alarm, Cloudflare works as expected.

No, it likely is the cache at the Cloudflare PoP you are connecting through. There is a cache header for me here as well, which shouldnt be there, in my case it was just a cache miss and not hit, like in your case apparently.

That file gets cached even though it shouldnt and if you posted the right screenshot earlier, there are no such page rules either. Either it is some other obscure setting or there is some glitch.

Only other explanation, did you have page rules set up earlier and maybe the file is still cached from back then.

I did not, although I did reuse the same Cloudflare account from other work I did over a year ago so it is possible I touched some setting somewhere back then that it still affecting things now.

And your purged the Cloudflare cache already?

Yes, that is the first thing I did when I started seeing the issue, I did a complete purge, and when that seemed to have no effect initially, I did a custom purge specifying just the URL to the JS file. So are you saying that despite everything working as expected for me now, the issue will probably come back and it is not local to my Chrome?

Thats not a browser issue. Cloudflare does send caching headers for a file where it shouldnt (based on the configuration you have shown so far). Thats really best a case for support. Post the ticket number here once you have it.

Ticket number: 1709217

@cloonan

1 Like

This topic was automatically closed after 14 days. New replies are no longer allowed.