Prevent cache in CloudFlare

Question

I'm getting started with CloudFlare and I’m using it to build a new project.

I’m facing an issue when I make changes: I cannot see my changes in the browser, so I assume the problem here is the cache setting of CloudFlare.

I have read this link, about the CloudFlare cache, so I put the following meta-tag in my html:

<meta http-equiv="Cache-control" content="private">

But the problem still remain.

Should I put other meta-tags, or prevent -somehow- caching from the server-side? (I'm using PHP)

Beadruby

Just clarifying in this post that we don't cache things like html or php by default, so we wouldn't impact this unless you set a PageRule to have us cache everything. We only cache static content by default & what we cache by default is here: support.cloudflare.com/hc/en-us/articles/… If you're making changes to the static content that we would cache, then you would want to either go to Development Mode or purge your cache. – Fuqua

Answer 1

cloudflare has a Development mode option that:

• Changes to cacheable content (like images, CSS, or JavaScript) will be visible immediately.
• CloudFlare's accelerated cache will be disabled.
• Development mode will automatically toggle off after 3 hours.
• If changes to your site are not immediate, press shift-reload.

You will also be able to turn off the Development mode at any time during the 3 hours.

Hope this helps with people looking for the same answer to this question or if you still have this issue.

Concupiscent

Answer 2

This is very old question. To disable this we don't have to turn on development mode because cloudfare caches the CSS and JS. If you want to disable only the particular JS or CSS simply put following attribute to the link or script tag.

<script data-cfasync="false" src="/javascript.js"></script>

Hellman

Answer 3

I just had to do this and it seems CloudFlare has updated their page rules. You can now create a page rule for a specific URL (and even use wildcards) then choose Cache Level > Bypass for the setting.

Sauterne

Answer 4

When I read you question it appears that you are (actually) wanting to specify caching rules in your code instead of directly on CloudFlare, I do this all the time.

This can be enabled globally or via a (targeted) page rule.

1. The global setting is located in Caching > Configuration > Browser Cache TTL > "Respect Existing Headers" (see screenshot)
2. The Page Rule setting will be in a rule attribute "Origin Cache Control = On"

Blackandblue

Answer 5

I have a couple of suggustions.

You could try

<meta http-equiv="Cache-control" content="max-age=0">  

If you don't have any success with this, have you considered using page rules? Check out the page rules section on https://support.cloudflare.com/entries/22576178-Is-there-a-tutorial-for-PageRules-

Good luck!

Roderick

Answer 6

I know this is an old post, but Cloudflare have a development mode, if you're editing your website turn dev mode on (in cloudflare settings)...

otherwise send a "Expires: -1" header... with "must-revalidate"

(and have you tried Ctrl + R)

Sometimes