How to fix Laravel mixed-content errors

Did you deploy out your Laravel app behind a load balancer, and were expecting to see this?

But... you see this?

You've come to the right place!

Why is it happening?

Before we get into solutions, let's first quickly describe what's going on.

When you set up your load balancing solution, you'll have one server dedicated to directing traffic for incoming requests to other servers.

The SSL cert is applied to the load balancer server, but not to the target servers.

When the request for the site is being made, the request hits the load balancer and is encrypted with SSL at the load balance server. Internally, the load balancer is making another request to a target server. However, this request is being made over port 80, which terminates SSL. The target server then returns the request via http as https was terminated during internal communication.

So, that's basically it!

The target server just doesn't know that it needs to return the info using https. Because of this, mixed-content will be flagged and the site won't render correctly as assets are being provided over http instead of https.

This is also why you may be very confused if you first deployed out your Laravel app on a regular server and not behind a load balancer, where everything rendered how you'd expect.

Now, let's discuss a couple of ways to solve this issue.

Solution 1 - force URLs to 'https'

The first method is to simply tell your app that it needs to use https for URL creation when running in production mode.

In AppServiceProvider.php, we'll add some code to public function boot() to force URLs to https when the app is running in production mode.

// add this to the top of the file
use Illuminate\Support\Facades\URL;


// add this statement to public function boot()
if($this->app->environment('production')) {
    URL::forceScheme('https');
};

After making the above updates, deploy your app and then the mixed-content issue will be no more.

Solution 2 - Add load balancer IP to list of trusted proxies

The second solution is moreso the recommended solution per Laravel documentation, which is to add trusted proxy external IPs to a list of approved proxies.

To do this, we'll update the middleware via TrustProxies.php.

Locate the line protected $proxies; and update is as follow:

protected $proxies = [
        '1.2.3.4'  //replace with load balancer's public IP
    ];

After making the above updates, deploy your app and boom! No more mixed-content errors!

We hope this guide helps you if you're running into this, or a similar issue!

Want to learn more or have an idea for another guide? Chat with us on the forum.

For this example, we used a random Laravel example we found on GitHub by Chetans9 and forked it.