生产中的 Laravel Livewire 混合内容错误

Question

我在 Digital Ocean 上部署了 Laravel-Livewire，现在我在尝试上传文件时遇到了混合内容问题。 这是错误：

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.

当我单击“选择文件”并选择我想要的 .csv 文件后，就会发生错误。由于我在 livewire 组件上执行此操作，因此我不确定如何解决此问题，以便请求通过 HTTPS 而不是 HTTP。

我可以通过将“asset()”更改为“secure_asset()”来解决应用程序上的类似问题 和 "route()" 和 "secure_url()" 但在这种情况下我不知道该怎么做。

这是整个“导入”组件：

<?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 . '"'
    ]);
}
}

Answer 1

如果您遇到混合内容问题，则主要是您从不同的 http 方案中获取资产或资源。在这里，您使用 HTTP 来获取 HTTPS 站点中的数据。将所有链接更改为具有 HTTPS 链接。

如果您想强制所有路由使用 https，您可以使用以下代码来实现。

if(env('APP_ENV', 'production') == 'production') { // use https only if env is production
 \URL::forceScheme('https')
}

以上内容应该可以解决您的问题，因为现在所有内容都将从 https 加载。