Turn Off Cache on Cloudflare When Using Magento and LiteMage

If you want to use Cloudflare or another CDN in front of your Magento store, make sure you turn off the CDN's page cache. You may enable caching of static files such as CSS,JavaScript, and media files, but leave the caching of dynamic pages to LiteMage. Engaging Cloudflare's page cache will break Magento as well as LiteMage.

For example, if you see headers like the following:

"cache-control:public, max-ago=14400" 
"cf-cache-status: HIT"

that is an indication that Cloudflare is breaking your Magento store, and causing undesired behavior. You can fix this by turning off Cloudflare's page cache. Why?

It helps to understand how Magento works. Magento requires a frontend cookie and a frontend_cig cookie to be set. Also Magento needs a form key from each user for the validation process.

If Cloudflare's page cache is enabled, then you cannot get the frontend and frontend_cig cookies in the header anymore, and as such, every form_key served from Cloudflare's cache will be the same. This causes a Magento validation failure, as a different form key is required from each user. If a user tries to add a product to the shopping cart or to the compare list, the operation will fail.

LiteMage is smart enough to handle this situation in its page cache, but Cloudflare and other CDNs are not.

The solution is to turn off all Cloudflare caching for dynamic content, keeping only static files such as CSS, JS, JPG, PNG, etc. and leave the page caching to LiteMage. The correct header should be:cache-control: no-store, no-cache