Statamic Mixed Content Errors: Why Your Website is Having an Identity Crisis (And How to Fix It)

Ever Felt Like Your Website Has Trust Issues? 😬

You finally launched your beautiful Statamic-powered website, and everything looks great. Then, you log into the Admin Panel, ready to bask in your creation’s glory—and bam! Axios error. You open DevTools, and there it is: the dreaded Mixed Content Error, staring back at you like a judgmental security guard. 🚨

(Disclaimer: This guide is based on my setup using statamic serve in Laravel and tunneled through Cloudflare. Your setup might differ, so while these fixes worked for me, they may not apply exactly to your case. Proceed with that in mind! 🚀)

Why Is This Happening? 🤔

Statamic, like a good friend, is trying to serve your content as securely as possible. However, sometimes old habits die hard. Maybe your assets were uploaded with absolute URLs pointing to http://. Or maybe some external resources are sneaking in over an insecure connection. Either way, your browser is not impressed and decides to shame you with security warnings.

This is like going to a black-tie event but still rocking your favorite old sneakers. The HTTPS protocol is the formal dress code and those rogue HTTP elements? They're the fashion crime. 🚔

How to Fix This Mess 🛠️

Alright, let's get your website back in order and regain its self-esteem. Here’s what you can do:

1. Update Your ENV File ⚙️

Double-check your .env file:

APP_URL=https://your-site.com
FORCE_HTTPS=true

2. Configure Trusted Proxies 🛡️

If you're using a proxy, you'll need to configure "trusted proxies" to ensure HTTPS works properly. Update your bootstrap/app.php file:

->withMiddleware(function (Middleware $middleware) {
    $middleware->trustProxies(at: '*');
})

For more details, check the Laravel documentation: Configuring Trusted Proxies.

3. Force HTTPS in Your Application 🔥

Go to app/Providers/AppServiceProvider.php and modify the boot method to enforce HTTPS:

public function boot(): void
{
    if (env('FORCE_HTTPS', false) === true) {
        URL::forceScheme('https');
    }
}

4. Clear Your Cache 🧹

After making these changes, clear your application cache to ensure everything takes effect:

php artisan cache:clear
php artisan config:clear
php artisan route:clear
php artisan statamic:stache:clear

Running these commands will make sure your site is refreshed and running with the latest configuration.

Final Thoughts: No More Digital Identity Crises 🚀

Mixed content errors can make your website feel like it’s stuck between two worlds—secure and insecure. But with a few tweaks, you can confidently step into the HTTPS future without looking back.

Now, go forth and banish those mixed content gremlins! Your Statamic site (and your visitors) will thank you.