🧹 Mengatasi Masalah CORS pada Gambar di Flutter Web dengan Laravel sebagai Proxy

Latar Belakang

Dalam pengembangan SorBan Naga versi Web, salah satu kendala yang sering muncul adalah gambar eksternal yang gagal dimuat karena masalah CORS (Cross-Origin Resource Sharing). Ini biasanya terjadi ketika gambar di-load langsung dari domain lain (CDN, storage pihak ketiga, dsb.), dan server tujuan tidak mengizinkan akses dari asal domain kita.

Masalah ini terutama berdampak pada Flutter Web, yang sangat ketat terhadap aturan CORS saat merender gambar atau file dari server yang berbeda domain.

Solusi: Laravel sebagai Proxy Gambar

Untuk mengatasi hal ini, kita akan membuat proxy sederhana di Laravel, yang bertindak sebagai perantara antara aplikasi Flutter Web dan sumber gambar eksternal. Tujuannya adalah agar gambar diakses seolah-olah berasal dari server kita sendiri, sehingga tidak diblokir oleh kebijakan CORS browser.

Langkah-langkah Implementasi

🛠️ 1. Tambahkan Route Proxy di Laravel (web.php)

Buka file routes/web.php di proyek admin panel Laravel kamu, lalu tambahkan route berikut:

use Illuminate\Support\Facades\Http;

Route::get('/image-proxy', function () {
    $url = request('url');
    if (!$url) {
        abort(400, 'Missing url parameter');
    }

    $response = Http::withHeaders([
        'User-Agent' => 'Laravel-Image-Proxy'
    ])->get($url);

    return response($response->body(), $response->status())
        ->header('Content-Type', $response->header('Content-Type'))
        ->header('Access-Control-Allow-Origin', '*');
});

Penjelasan:

• Route ini menerima parameter url dari frontend.
• Laravel akan mengambil gambar dari URL tersebut secara backend (server-side).
• Gambar dikembalikan ke frontend dengan header yang mengizinkan CORS.

🧩 2. Modifikasi Pemanggilan Gambar di Flutter Web

Buka file lib/common/widgets/custom_image.dart, lalu:

🔁 Ganti baris pemanggilan gambar (misalnya baris ke-27) menjadi:

'${AppConstants.baseUrl}/image-proxy?url=$image',

Ini akan membuat gambar dimuat melalui proxy Laravel, bukan langsung ke CDN.

🔭 Tambahkan import berikut jika belum ada:

import 'package:sorbannaga/util/app_constants.dart';

AppConstants.baseUrl harus berisi domain backend Laravel kamu, contoh: https://admin.sorbannaga.com

🗪 3. Build dan Uji Aplikasi

Setelah perubahan dilakukan:

• Jalankan perintah:flutter build web
• Deploy hasil build ke server hosting/web kamu.
• Uji di browser: gambar seharusnya kini tampil tanpa error CORS.

🔍 Contoh Visual

Untuk referensi visual dan struktur kode yang dimaksud, kamu bisa melihat gabmar berikut:

📝 Catatan Tambahan

• Pastikan backend Laravel kamu bisa mengakses internet (jika CDN eksternal memerlukan koneksi luar).
• Gunakan metode ini hanya untuk gambar atau file publik — proxy ini tidak cocok untuk konten yang membutuhkan autentikasi.

Penutup

Dengan menerapkan metode image proxy di Laravel, kamu bisa menghindari masalah CORS pada Flutter Web dengan cara yang sederhana, aman, dan efisien. Solusi ini cocok digunakan dalam modul eCommerce, ojek (BanJek), farmasi, dan modul lain di ekosistem SorBan Naga yang membutuhkan pemuatan media lintas domain.

Butuh bantu buat deploy atau test implementasinya? Tim teknis SorBan Santri siap bantu. Gas terusss! 🐉🔥