How to Fix Mixed Content Error in Laravel Quickly

To fix a mixed content error in Laravel, ensure your app forces HTTPS by setting APP_URL to use https:// and use Laravel's asset() or secure_asset() helpers for URLs. Also, configure your web server and middleware to redirect HTTP requests to HTTPS.

Why This Happens

Mixed content errors occur when your Laravel app loads some resources (like images, scripts, or styles) over HTTP while the main page is served over HTTPS. Browsers block these insecure resources to protect users.

This often happens if your app URL or asset URLs are hardcoded with http:// or if the server does not redirect HTTP to HTTPS.

php

<?php
// Example of broken code causing mixed content error
// Hardcoded HTTP URL in a Blade template
<img src="http://example.com/images/logo.png" alt="Logo">

// Or using asset() helper without forcing HTTPS
<img src="{{ asset('images/logo.png') }}" alt="Logo">

Output

Mixed Content: The page at 'https://yourdomain.com' was loaded over HTTPS, but requested an insecure image 'http://example.com/images/logo.png'. This request has been blocked; the content must be served over HTTPS.

The Fix

Update your .env file to set APP_URL with https://. Use Laravel's secure_asset() helper to generate HTTPS URLs for assets. Also, add middleware or web server rules to redirect all HTTP requests to HTTPS.

php

// .env file
APP_URL=https://yourdomain.com

// In Blade template
<img src="{{ secure_asset('images/logo.png') }}" alt="Logo">

// Middleware example to force HTTPS (app/Http/Middleware/RedirectToHttps.php)
namespace App\Http\Middleware;

use Closure;

class RedirectToHttps
{
    public function handle($request, Closure $next)
    {
        if (!$request->secure()) {
            return redirect()->secure($request->getRequestUri());
        }
        return $next($request);
    }
}

// Register middleware in Kernel.php
// 'middleware' => [\App\Http\Middleware\RedirectToHttps::class],

Output

All asset URLs load over HTTPS, and HTTP requests redirect to HTTPS, eliminating mixed content errors.

Prevention

Always use secure_asset() or url()->secure() helpers for URLs in Laravel. Keep APP_URL set to HTTPS in production. Configure your web server (Apache, Nginx) to redirect HTTP to HTTPS. Use HTTPS everywhere to avoid mixed content issues.

Consider using Laravel's TrustProxies middleware correctly if behind a load balancer or proxy.

Related Errors

Other common errors include:

• Invalid SSL certificate: Causes browser warnings; fix by installing a valid SSL cert.
• Redirect loops: Happens if HTTPS redirect middleware conflicts with proxy settings; fix by configuring TrustProxies.
• Mixed content in API calls: Ensure API URLs use HTTPS.

Key Takeaways

Set APP_URL to use https:// in your .env file to ensure Laravel generates secure URLs.

Use secure_asset() helper to load assets over HTTPS and avoid mixed content errors.

Add middleware or web server rules to redirect all HTTP requests to HTTPS.

Configure TrustProxies middleware properly when behind proxies or load balancers.

Always test your site in browsers to confirm no mixed content warnings appear.