Угловой интерфейс не загружается из конечной точки: запрошена небезопасная конечная точка XMLHttpRequest

Question

У меня есть угловой интерфейс и Laravel. Я проверил конечные точки на POSTMAN, и он работает очень хорошо. Однако, когда я тестировал на Серве, он ничего не загружал, и я получил эту ошибку.

Смешанный контент: страница в 'https://example.com/smsmt' была загружена через HTTPS, но запросила небезопасную конечную точку XMLHttpRequest' http://example.com/api/smsmt'. Этот запрос был заблокирован; содержимое должно быть передано по HTTPS.

Screenshort:

ApiController.php

    public function indexSmsmt()
{
    $smsmts = Smsmt::all();
    return response()->json(['success' => true,'data'=>$smsmts], $this->successStatus);

}   

public function showSmsmt($id)
{
    $smsmt = Smsmt::find($id);

    if (is_null($smsmt)) {
        return $this->sendError('SMS Incoming not found.');
    }        
    return response()->json(['success' => true,'data'=>$smsmt], $this->successStatus);
}    

public function storeSmsmt(Request $request)
{
    $smsmt = Smsmt::create($request->all());
    return response()->json(['success' => $smsmt], $this-> successStatus);
}    

public function editSmsmt($id)
{
    $smsmt = Smsmt::find($id);
    return response()->json(['success' => true,'data'=>$smsmt], $this->successStatus);
}

public function updateSmsmt(Request $request, $id)
{
    $smsmt = Smsmt::find($id);
    $smsmt = $smsmt->update($request->all());
    return response()->json(['success' => true,'data'=>$smsmt], $this->successStatus);
}

public function deleteSmsmt($id)
{
    $smsmt = Smsmt::find($id)->delete();
    return response()->json(['success' => true], $this->successStatus);
}

kernel.php

    protected $middleware = [
...
    \Barryvdh\Cors\HandleCors::class,
];

protected $middlewareGroups = [
    'web' => [
    ],

    'api' => [
        'throttle:60,1',
        'bindings',
        \Barryvdh\Cors\HandleCors::class,
    ],
];

конфиг / app.php

    'providers' => [

    /*
     * Application Service Providers...
     */

    Barryvdh\Cors\ServiceProvider::class,

  ],

cors.php

<?php

return [

/*
|--------------------------------------------------------------------------
| Laravel CORS
|--------------------------------------------------------------------------
|
| allowedOrigins, allowedHeaders and allowedMethods can be set to array('*')
| to accept any value.
|
*/

'supportsCredentials' => false,
'allowedOrigins' => ['*'],
'allowedOriginsPatterns' => [],
'allowedHeaders' => ['*'],     // ex: ['Content-Type', 'X-Requested-With'],
'allowedMethods' => ['*'],   // ex: ['GET', 'POST', 'PUT',  'DELETE']
'exposedHeaders' => [],
'maxAge' => 0,
];

environment.prod.ts

 export const environment = {
 production: true,
 apiUrl:   'http://exampl.com/api',
 };

smsmt.service.ts

import { Injectable } from '@angular/core';
import { Observable, of, throwError } from 'rxjs';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { catchError, tap, map } from 'rxjs/operators';
import { Smsmt } from '../models/smsmt';
import { environment } from 'src/environments/environment.prod';

const httpOptions = {
  headers: new HttpHeaders({'Content-Type': 'application/json'})
};

@Injectable({
  providedIn: 'root'
})

export class SmsmtService {
private API_URL= environment.apiUrl;
constructor(private http: HttpClient) { }

  getSmsmts (): Observable<Smsmt[]> {
return this.http.get<Smsmt[]>(this.API_URL + '/indexSmsmt')
  .pipe(
    tap(smsmts => console.log('Fetch smsmts')),
    catchError(this.handleError('getSmsmts', []))
  );
  }

  getSmsmt(id: number): Observable<Smsmt> {
    const url = this.API_URL + '/editSmsmt' + '/{id}';
    return this.http.get<Smsmt>(url).pipe(
  tap(_ => console.log(`fetched smsmt id=${id}`)),
  catchError(this.handleError<Smsmt>(`getSmsmt id=${id}`))
);
}

  addSmsmt (smsmt): Observable<Smsmt> {
return this.http.post<Smsmt>(this.API_URL + '/storeSmsmt', smsmt, 
httpOptions).pipe(
  tap((smsmt: Smsmt) => console.log(`added smsmt w/ id=${smsmt.id}`)),
  catchError(this.handleError<Smsmt>('addSmsmt'))
);
 }

 updateSmsmt (id, smsmt): Observable<any> {
  const url = this.API_URL + '/updateCSmsmt' + '/{id}';
  return this.http.put(url, smsmt, httpOptions).pipe(
  tap(_ => console.log(`updated smsmt id=${id}`)),
  catchError(this.handleError<any>('updateSmsmt'))
);
  }

  deleteSmsmt (id): Observable<Smsmt> {
  const url = this.API_URL + '/deleteSmsmt' + '/{id}';

return this.http.delete<Smsmt>(url, httpOptions).pipe(
  tap(_ => console.log(`deleted smsmt id=${id}`)),
  catchError(this.handleError<Smsmt>('deleteSmsmt'))
);
  }

  private handleError<T> (operation = 'operation', result?: T) {
return (error: any): Observable<T> => {

  // TODO: send the error to remote logging infrastructure
  console.error(error); // log to console instead

  // Let the app keep running by returning an empty result.
  return of(result as T);
};
  }  
}

Smsmt.component.ts

import { Component, OnInit } from '@angular/core';
import { SmsmtService } from '../../../services/smsmt.service';
import { Router } from '@angular/router';
import { Smsmt } from '../../../models/smsmt';

@Component({
  selector: 'app-bulk-sms-outbox',
  templateUrl: './bulk-sms-outbox.component.html',
  styleUrls: ['./bulk-sms-outbox.component.scss']
})

export class BulkSmsOutboxComponent implements OnInit {
  displayedColumns: string[] = ['msisdn', 'message', 'telco','error_message','error_code', 'package_id'];
  data: Smsmt[] = [];
  isLoadingResults = true;    
  constructor(private api: SmsmtService) { }

  ngOnInit() {
this.api.getSmsmts()
  .subscribe(res => {
    this.data = res;
    console.log(this.data);
    this.isLoadingResults = false;
  }, err => {
    console.log(err);
    this.isLoadingResults = false;
  });
  }

  ngOnDestroy(): void {
document.body.className = '';
  } 

}

component.html

                <tr  *ngFor="let datas of data| paginate: { itemsPerPage: 5, currentPage: p }; let i = index">
                  <td>{{i + 1}}</td>
                <td>{{datas.msisdn}}</td>
                <td>{{datas.short_code_called}}</td>
                <td>{{datas.package_id}}</td>
                <td>{{datas.error_message}}</td>
                <td>{{datas.error_code}}</td>
          </tr>

Ничего не загружается.

Как мне решить эту проблему?