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

P.S The browser’s cookies are enabled.

Here’s the CloudFlare’s page rule

*.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 :

*.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-*   

References

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