#fluttercdn

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 IlluminateSupportFacadesHttp; Route::get('/image-proxy', function () { $url = request('url'); if (!$url) { abort(400, 'Missing url parameter'); } $response = Http::withHeaders()->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