CloudFlare + WordPress admin, Cache issue

Below is my website environment :

  1. WordPress 3.8.1
  2. CloudFlare Pro Plan

1. Problem

I’m unable to login WordPress after changing my custom DNS to CloudFlare, below is the error message :


ERROR: Cookies are blocked or not supported by your browser. You must enable cookies to use WordPress
2014-02-05_231731

P.S The browser’s cookies are enabled.

Here’s the CloudFlare’s page rule

Custom caching : Cache everything

*.example.com/*

2. Solution – Pro Plan

To solve it, disable the caching for WordPress admin, login and preview pages. Create three more CloudFlare page rules like this :

Custom caching : Bypass cache

*.example.com/wp-admin/*
*.example.com/wp-login.php*
*.example.com/*&preview=true

And turn off all the CloudFlare features like : Rocket Loader, performance, always online, cache and etc, you don’t need CloudFlare to handle your WordPress admin functions.

In summary, there are total four page rules :


*.example.com/wp-admin/*     //disabled everything
*.example.com/wp-login.php*  //disabled everything
*.example.com/*&preview=true //disabled everything
*.example.com/*              //enabled any features you want

3. Solution – Free Plan

For CloudFlare free plan, there is only one page rule, try define the following page rule pattern :


*.example.com/wp-*   
Note
I’m using CloudFlare’s pro plan, unable to test in a free plan environment, let me know if the above page rule is working.

References

  1. Cloudflare : Introducing Page Rules
  2. Browser : Enable or disable cookies
author image

mkyong

Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities. Read all published posts by

Comments

avatar
3000
newest oldest most voted
Michael SMith
Guest
Michael SMith

Isn’t it better to just switch Cloudflare to “Development Mode” when you need to work on the site? By the way as for your suggestion to turn off Cloudflare Rocket Loader, performance, always online, cache, etc. I have to tell you Google PageSpeed Insights says otherwise!

jay
Guest
jay

Thanks for the info 🙂 God Bless.

bkchua
Guest
bkchua

I just recently set up page rules in Cloudflare to cache everything. And After I migrated to a new host and tested on logging in to my wordpress admin page. I noticed the admin bar appearing at the top when I tried to access my sites on other devices. Is this due to the cache everything which I set in the page rules? Or something was broken during the migration that caused this issue. Now I am trying on your solution for free plan to see if I can bypass cache wp-*. Hope it works.

Ashoksinh Gohil
Guest
Ashoksinh Gohil

Yes it working in free plan , i checked
I solve my problem
Thanx

Scott Kingsley Clark
Guest
Scott Kingsley Clark

I was using cache everything, but was missing the * on the end of the wp-login.php rules! It resulted in cookies not getting set properly 🙁

So every load of the link would come up with “Your password reset link appears to be invalid.”

Now it’s resolved by modifying my bypass cache rule to be: https://*.mysite.org/wp-login.php*

Brenton Johnson
Guest
Brenton Johnson

Thank you, there is three rules for free now. wp- is very handy.

MrJoshuaPack
Guest
MrJoshuaPack

Awesome work! i was wondering why i couldn’t log in. And found disabling caching worked. Now that I can put in these rules it helps. Thanks! Also, I have the free plan on a couple domains and see that it works there too.

Eli
Guest
Eli

I found that when I used the pages rules you suggest, and for the last rule, I chose Cache Everything, that regular visitors to my site see the wordpress admin bar (very embarrassing!). But if I change the last rule to Aggressive Caching, it solves that problem, but now I think CloudFlare is not actually caching the pages (so if my host goes down, then so does the site). Any ideas?

Gabriele
Guest
Gabriele

Hi,
the problem is that cloudflare doesn’t know if a user is logged or not, while cacihng. This mean, if it cache a page from a logged user, the admin bar will show up for everyone!

If you “aggressive cache” the page, the admin bar is still loaded, just the relevant javascript is not. So the bar is present, but hidden. This could be a potential security breach.

To really solve the problem, you need a plugin like “Sunny” that, among other features, complitely disable the admin bar on the front-end. Quite aggressive, but safer. (Don’t forget to purge the cache after enabling the plugin!)

Maryam
Guest
Maryam

This was perhaps a lifesaver for me – Including the comment by David which mentions the order. THANK YOU!!!!!!

David Castellani
Guest
David Castellani

You may want to make a mention that the ORDER that the rules appear in, from top to bottom, also factor into the rules effectiveness. If you have a cache everything rule above the /wp-admin/ and the wp-login.php, the wp-admin/wp-login.php will still be cached.

Tommy
Guest
Tommy

Thanks man your tip helped me to sort all that rules.

Gerardo Arambulo
Guest
Gerardo Arambulo

thanks, I didn’t know

HowToDoInJava
Guest
HowToDoInJava

Yup. I also tried once for my blog. CloudFlare is very unstable.

jimmy
Guest
jimmy

Mk Yong, since you had changed to CouldFlare, the website is very unstable. I am in China and it reports DNS failure. Now I have to change to other proxies. I think most people from China will suffer from this issue. Could you please fix it?

mkyong
Guest
mkyong

I noticed China traffic is drop tremendously, can you send me more information, like screenshot and your request IP via above “contact us” form or send to this email directly “mkyong2002[at]yahoo.com. Thanks.

Jimmy
Guest
Jimmy

Yesterday was such a bad day that I found mkyong.com was unavailable.And this morning it is so sweet! Thanks!