#cross-origin

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

We're using web fonts on almost every site we develop these days, but I've recently been running into a cross-domain issue in Firefox. This isn't a new issue, but it's new to me. Most recently I encountered the problem while creating a Tumblr theme for the Elevator Up blog: as much as possible I wanted to use the same assets as the Elevator Up web site, but I ran into issues when referencing the remote font files.

What's the problem?

Cross-site HTTP requests are HTTP requests for resources from a different domain than the domain of the resource making the request. Firefox and newer versions of Internet Explorer enforce the Cross-Origin Resource Sharing standard, and thus only render web fonts served with the appropriate “Access-Control-Allow-Origin” response header. Chrome doesn't require the CORS header for web fonts.

What are my options?

The simplest - although not necessarily cheapest or most satisfactory - solution is to check if the font is available from a free or paid font hosting service as they've already solved this problem for us.

If you want to host your own fonts, you're going to have to do some extra work.

If the fonts are stored on a server under your control, you can edit the config to enable CORS, allowing the files to be accessed remotely. Additionally, check that your files are being served up with the correct mime types. You may get away with application/octet-stream, but better safe than sorry.

WOFF application/x-font-woff TTF application/x-font-ttf EOT application/vnd.ms-fontobject SVG image/svg+xml

Convert your binary font files to base 64 and embed them directly into your CSS file.

The last option is the epiphany I reached after many frustrating hours of trial and error. It turns out this solution has been widely used for several years already, if only I'd known where to look. This method is how Typekit delivers its fonts. In fact Typekit appears to be only returning font/opentype which is only partially-supported by IE (unless the fonts are set to installable).

Typekit CSS file view through Chrome's web inspector

To be on the safe side, I'm using Geoff Evason's method. It actually embeds the TTF font within the CSS file, so it can be served up directly from a remote server and still work on Firefox. This solution isn't optimal as it increases size of my CSS file, even for those browsers that won't use the embedded version of the font, but it does save on an HTTP connection for those that will.

If you'd prefer to roll your own font code, here's a handy dandy binary base 64 converter.

Ever encountered a cross origin error when running something on different ports on your computer? 

Well, allowing cross origin requests to your apache is as simple as running this command on your terminal:

sudo ln -s /etc/apache2/mods-available/headers.load /etc/apache2/mods-enabled/headers.load

and adding those lines to the `<Directory>` section of your virtual host file (/etc/apache2/sites-enabled/YOUR_SITE_NAME):

Header always set Access-Control-Allow-Origin "*"

Header always set Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS

Header always set Access-Control-Allow-Headers Origin,X-Requested-With,Content-Type,Accept