ngrok does not load https

Darma Riduan

Feb 13, 2024

Ngrok yaitu tools open-source yang memungkinkan kita untuk membuat tunnel yang mengarahkan lalu lintas internet ke server lokal kita. Dengan kata lain, NGROK memberikan alamat URL publik yang dapat diakses oleh siapa pun melalui internet, dan lalu lintas yang diterima oleh alamat URL tersebut akan diteruskan ke server lokal kita. Ini sangat berguna ketika kita ingin menguji proyek web lokal secara real-time, berbagi proyek dengan rekan tim atau klien, atau melakukan debugging pada aplikasi yang berjalan di server lokal.

Browser seperti Chrome atau sejenisnya secara default menggunakan protocol https sedangkan NGROK pada umumnya menggunakan protocol HTTP, Anda sebagai Developer yang ingin menampilkan demo Apps Anda kepada client pasti tidak ingin mengeluarkan biaya lebih untuk membeli Hosting atau Server hanya untuk demo Apps.

Disini NGROK memang menjadi solusi untuk Hal itu, tapi terkadang client Anda ketika akses URL demo yang Anda berikan dari NGROK assets untuk CSS tidak terload, nah disini tidak perlu khawatir. Saya juga mengalami hal yang serupa pada Apps Laravel saya, setelah saya telusuri masalah ini akhirnya saya menemukan tempat diskusi yang membahas ini pada forum ngrok laragon loads document root instead of shared site Memang berbeda Kasus, pada URL di atas terdapat masalah yang dimana URL Directory mengarah pada halaman root.

Tetapi terdapat beberapa saran yang bisa kita gunakan untuk mengatasi masalah sesuai dengan judul Postingan ini yaitu ngrok does not load https, Anda cukup jalankan perintah ini pada Terminal Laragon atau sejenisnya :

Buka AppServiceProvider.php (App-Providers-AppServiceProvider)

Masukan kode ini pada bagian Register

<?php

namespace App\Providers;

use Illuminate\Support\Facades\URL;
use Illuminate\Support\Facades\Schema;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
        if (env(key: 'APP_ENV') !== 'local') {
            URL::forceScheme(scheme: 'https');
        }
    }

    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        // Schema::defaultStringLength(191);
    }
}

Refresh Browser pastikan menggunakan CTRL + F5 (Pada Windows agar menghilang cache sebelumnya)

Jika kode diatas tidak berjalan dengan Anda, lakukan perubahan pada kode register seperti ini.

public function register(): void
    {
        if (env(key: 'APP_ENV') === 'local' && request()->server(key: 'HTTP_X_FORWARDED_PROTO') === 'https') {
    URL::forceScheme(scheme: 'https');
}
    }

Selain cara diatas terdapat 1 lagi cara yang dapat dilakukan, yaitu sebagai berikut :

Buat Middleware baru app/Http/Middleware/UpgradeToHttpsUnderNgrok.php

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\URL;
use Symfony\Component\HttpFoundation\Response;

class UpgradeToHttpsUnderNgrok
{
    public function handle(Request $request, Closure $next): Response
    {
        if (str_ends_with($request->getHost(), '.ngrok-free.app')) {
            URL::forceScheme('https');
        }

        return $next($request);
    }
}

Registrasikan Middleware tersebut di app/Http/Kernel.php

protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\UpgradeToHttpsUnderNgrok::class,
        ],

        'api' => [
        ],
    ];