I've just about recovered from the headache that was caused from configuring cache for a side project recently.

The TLDR:

• Disabled nginx cache headers
• Handled cache control headers with Laravel
• Changed setting to make sure Cloudflare respected my custom headers

My original setup:

• Nginx cache expires
• Laravel as the application
• Cloudflare saving the cache

I have my main website which I wanted to cache for X number of hours, with some pages needing less time than others. I also had some API routes for even less time. The site in the end would also be cached by Cloudflare to reduce server origin requests.

Things I tried and failed:

• Countless attempts at setting different expires for different location blocks within the nginx conf.
• Setting headers in the response within Laravel controllers to having it not update at all.

Nothing was working and nothing was updating.

Giving up on handling this within nginx, I moved to see how I could just handle this within my Laravel codebase, and looked to see how Laravel handles cache control headers.

Configuring Laravel with SetCacheHeaders middleware

It turns out there's a less known middleware (not mentioned in the documentation) specifically to handle cache on routes. You can find your middlewares within your App\Http\Kernel.php and see 'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class under the route middleware group.

• This allowed me to apply custom cache headers to my route groups or endpoints Route::get('/','SiteController@index')->name('home')->middleware('cache.headers:public;max_age=1800');
• Thinking I'd cracked it I went to check my response headers, and saw 14400 coming out of the response headers, even though my value was 1800.
• Convinced this was actually working and something was being overwritten, I looked into what Cloudflare was doing.

Configuring Cloudflare to respect origin headers

• Under Page Rules within Cloudflare, it's important when you're wanting to set custom cache levels that within Cloudflare you have "Origin Cache Control", switched on.
• Also under Caching > Configuration, also make sure you have "Browser Cache TTL" set to "Respect Existing Headers".
• If either of those are not set, Cloudflare will set its own cache level and will ignore anything you've set.

After taking cache into my own hands, and configuring Cloudflare to work with it correctly I've now got different endpoints with different levels of cache time.

Looking for a Laravel Developer on your next project?

I help agencies, startups, and individuals stand out by creating exceptional websites, mobile apps, and digital experiences. Based in Surrey, I work with clients in London and internationally, providing flexible, tailored solutions for every project.

• Website Design & Development - Custom websites designed to fit your brand, optimized for performance, and built with scalability in mind.
• Web App Development - Robust, feature-rich web applications for startups and enterprises.
• Mobile App Development - Cross-platform mobile apps using React Native for iOS and Android.
• Laravel Development - Scalable, secure backend solutions with Laravel.
• React JS Development - Modern, fast, and responsive frontends built with React.
• React Native Development - Cross-platform mobile apps built with React Native for native-like performance.