Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

fanpero87's avatar

Laravel Livewire Mixed Content error in production

Hello, I deployed a Laravel-Livewire on Digital Ocean and now I'm having a Mixed content problem when I try to upload a file. Here is the error:

UploadManager.js:131 Mixed Content: The page at 'https://intake.freejiji.ca/clients/3/extensions' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://intake.freejiji.ca/livewire/upload-file?expires=1625251608&signature=9d98c598db4f6fccc01c009bcfc3051c6a97b56f4058f4d9489a8d30d6d497c2'. This request has been blocked; the content must be served over HTTPS.

The error happens when after I click "Select File" and chose the .csv file I want. Since I'mdoing this on a livewire component I'm not sure how to fix this so that the request goes over HTTPS instead of HTTP.

I was able to fix similar problems on the app by changing "asset()" with "secure_asset()" and "route()" with "secure_url()" but in this case I'm not sure what to do.

Here is the whole "Import" component:

<?php

namespace App\Http\Livewire\Modals;

use Validator;
use Livewire\Component;
use App\Http\Traits\Csv;
use App\Models\AccountUser;
use Livewire\WithFileUploads;
use Illuminate\Validation\Rule;
use Illuminate\Support\Facades\Auth;

class ImportExtensions extends Component
{

use WithFileUploads;

public $clientID;
public $showModal = false;
public $upload;
public $columns;
public $fieldColumnMap = [
    'first_name' => '',
    'last_name' => '',
    'email' => '',
    'password' => '',
    'extension' => '',
    'user_type' => '',
];

protected $rules = [
        'fieldColumnMap.first_name' => 'required|max:255',
        'fieldColumnMap.last_name' => 'required|max:255',
        'fieldColumnMap.email' => 'required|max:255',
        'fieldColumnMap.password' => 'required|max:255',
        'fieldColumnMap.extension' => 'required|max:255',
        'fieldColumnMap.user_type' => 'required|max:255',
];

protected $validationAttributes = [
    'fieldColumnMap.first_name' => 'First Name',
    'fieldColumnMap.last_name' => 'Last Name',
    'fieldColumnMap.email' => 'Email',
    'fieldColumnMap.password' => 'Password',
    'fieldColumnMap.extension' => 'Extension',
    'fieldColumnMap.user_type' => 'User Type',
];

public function updatingUpload($value)
{
    Validator::make(
        ['upload' => $value],
        ['upload' => 'required|mimes:csv'],
    )->validate();
}

public function updatedUpload()
{
    $this->columns = Csv::from($this->upload)->columns();
    $this->guessWhichColumnsMapToWhichFields();
}

public function import()
{
    // Validate that you are importing any data
    $this->validate();

    $importCount = 0;
    Csv::from($this->upload)
    ->eachRow( function ($row) use (&$importCount){
        $eachRow = $this->extractFieldsFromRow($row);

        // Validate each Row of the csv file
        $validatedData = Validator::make([
            'first_name' => $eachRow['first_name'],
            'last_name' => $eachRow['last_name'],
            'email' => $eachRow['email'],
            'password' => $eachRow['password'],
            'extension' => $eachRow['extension'],
            'user_type' => $eachRow['user_type'],
            ],[
            'first_name' => 'required',
            'last_name' => 'required',
            'password' => 'required|max:255',
            'user_type' => 'required|in:user,admin',
            'email' => 'required|email|unique:account_users',
            'extension' => ['required', 'numeric', Rule::unique('account_users', 'extension')
            ->where(function($query)
            {return $query->where("account_id", $this->clientID);
            })],

        ],);

        if($validatedData->fails()){
            $this->notify(['error','Oops something went wrong!']);
        }else{
            AccountUser::create([
                'user_id' => Auth::user()->id,
                'account_id' => $this->clientID,
                'first_name' => $eachRow['first_name'],
                'last_name' => $eachRow['last_name'],
                'email' => $eachRow['email'],
                'password' => $eachRow['password'],
                'extension' => $eachRow['extension'],
                'user_type' => $eachRow['user_type'],
            ]);
            $importCount++;
        }
    });

    $this->reset();
    $this->emit('refreshExtensions');
    if($importCount!=0) $this->notify(['success','Successfully Imported '.$importCount.' Extensions']);
}

public function guessWhichColumnsMapToWhichFields()
{
    $guesses = [
        'first_name' => ['first_name', 'name'],
        'last_name' => ['last_name'],
        'email' => ['email'],
        'password' => ['password', 'pass'],
        'extension' => ['extension', 'ext'],
        'user_type' => ['user_type', 'user', 'type'],
    ];

    foreach ($this->columns as $column) {
        $match = collect($guesses)->search(fn($options) => in_array(strtolower($column), $options));
        if ($match) $this->fieldColumnMap[$match] = $column;
    }
}

public function extractFieldsFromRow($row)
{
    $attributes = collect($this->fieldColumnMap)
        ->filter()
        ->mapWithKeys(function($heading, $field) use ($row) {
            return [$field => $row[$heading]];
        })
        ->toArray();

    return $attributes;
}

public function downloadTemplate()
{
    $filename = 'extensions_template.xls';
    $path = public_path('files/' . $filename);

    return response()->download($path, $filename, [
        'Content-Type' => 'application/vnd.ms-excel',
        'Content-Disposition' => 'inline; filename="' . $filename . '"'
    ]);
}
}
0 likes
11 replies
fanpero87's avatar

Hello, Here is what I have on my Config/app.php file:

'name' => env('APP_NAME', 'Laravel'),
'env' => env('APP_ENV', 'production'),
'debug' => (bool) env('APP_DEBUG', false),
'url' => env('APP_URL', 'https://localhost'),
'asset_url' => env('ASSET_URL', null),

And here are the Variables on Digital Ocean: APP_ENV = production APP_KEY = {{ encrypted}} APP_URL = ${APP_URL}

I don't know where else to make a change to force everything to HTTPS.

1 like
tiojobs's avatar

Hi there!

I got the same problem. Do you have any idea to solve this problem?

fanpero87's avatar

Hey, Unfortunately no. I could not find a solution so I dropped the app on Digital Ocean. But if you find the solution please let me know.

toixtran's avatar

@fanpero87 @tiojobs I got same problem and fixed it with bellow step:

  • Add force schema https when environment is production Add bellow code to app/Providers/AppServiceProvider.php at boot function
if($this->app->environment('production')) {
    \URL::forceScheme('https');
}
  • After that it will call upload file with https protocol but it still get error 401 File upload over https fails signature verification
  • So I changed the app/Http/Middleware/TrustProxies.php
protected $proxies = '*';

And it worked for me. Hope it help you

10 likes
ibitk72's avatar

@toixtran all proxies was the solution for me on AWS ELB. I only needed to change this and did not need to forceScheme. Laravel Middleware documentation talks about it specifically and your answer led me to that. Thanks!

JernalinSadhoo's avatar

If you get mixed content problem it is mostly about you fetching the assets or resources from different http scheme. Here you are using HTTP to fetch data in HTTPS site. Change all the links to have HTTPS link.

If you want to force all the routes to use https you can achieve this by using following code.

if(env('APP_ENV', 'production') == 'production') { // use https only if env is production \URL::forceScheme('https') } The above should solve your problem as all contents now will load from https.

thejmitchener's avatar

I ran into this problem recently.

I needed to update the APP_URL var in the .env file from http:// to https://

Cheers

amiralidev's avatar

in livewire use below code


<?php
namespace App\Http\Middleware;
use Illuminate\Http\Request;
use Fideloper\Proxy\TrustProxies as Middleware;
class TrustProxies extends Middleware
{
    /**
     * The trusted proxies for this application.
     *
     * @var array|string
     */
    protected $proxies = '*';
    /**
     * The headers that should be used to detect proxies.
     *
     * @var int
     */
    protected $headers = Request::HEADER_X_FORWARDED_ALL;
}
4 likes
Lilbro's avatar

@naimul007a In latest laravel version, you can add following code inside bootstrap/app.php ->withMiddleware(function (Middleware $middleware) { $middleware->trustProxies(at: '*'); }) Don't forget to clear cache after that.

Please or to participate in this conversation.