In short : Pada artikel ini saya akan menjelaskan langkah – langkah sederhana untuk menyetting CORS pada Apache, Nginx dan OpenLiteSpeed (OLS)
Apa itu CORS ?
CORS adalah singkatan dari Cross Origin Resource Sharing. CORS adalah sebuah mekanisme yang membatasi resource (misalkan fonts) pada sebuah halaman situs yang direquest dari domain lain, diluar domain yang menyediakan resource untuk pertama kalinya.
Jika CORS ini tidak disetting, maka akibatnya resource tersebut (seringnya fonts) tidak dapat ditampilkan dengan baik. Sehingga munculnya bukan simbol, tapi kotak – kotak. Contohnya seperti gambar dibawah ini.

Kalau kita lakukan inspect element, maka akan kelihatan bahwa ada resource yang diblokir seperti ini :

Bagaimana CORS bisa terjadi ?
CORS biasanya dialami oleh pengguna CDN dengan metode PULL CDN. Dalam hal ini, resource fonts web saya aslinya ada di https://tekno.gabrieldwi.id/wp-content/plugins/litespeed-cache/css/fonts/litespeedfont.woff?rsttg
tapi CDN yang saya gunakan (Akamai By Microsoft Azure) melakukan caching sehingga fonts direquest melalui https://tkn.azureedge.net/wp-content/plugins/litespeed-cache/css/fonts/litespeedfont.woff?rsttg
Nah, karena CORS nya belum saya setting, alhasil fonts tersebut diblokir dan tidak dapat ditampilkan. Ya, jadinya kotak – kotak.
Cara Settingnya Bagaimana ?
Cara settingnya mudah, kita hanya perlu menambahkan header Access-Control-Allow-Origin *
Untuk Apache
Bagi yang menggunakan webserver Apache, silahkan buka .htaccess
kemudian tambahkan header berikut
<IfModule mod_headers.c>
<FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
Header set Access-Control-Allow-Origin *
</FilesMatch> </IfModule>
Kemudian restart Apachenya
Untuk NGINX
Bagi yang menggunakan webserver NGINX, silahkan buka virtualhostnya gabrieldwi.conf
Lalu masukkan seperti ini :
location ~ \.(ttf|ttc|otf|eot|woff|font.css|css)$ {
add_header Access-Control-Allow-Origin "*"; }
Kemudian restart NGINX nya
Untuk OpenLiteSpeed
Bagi yang menggunakan OpenLiteSpeed, kita tinggal tambakan lewat context. Caranya :
- Buka webadmin console LiteSpeed
- Buka menu VirtualHosts (disebelah kiri)
- Pilih domain yang akan disetting CORS nya
- Pilih tabs context
- Pilih menu add (disebelah pojok kanan atas)
- Pilih type : Static (jangan yang lain), klik next
- Isikan URI dengan “/ ” (tanpa tanda petik)
- Isikan location dengan direkotri root domain misalkan /home/domainku.id/public_html/
- Accesible pilih YES
- Pada menu Extra Headers, isikan
Access-Control-Allow-Origin *
- Save dan Gracefull restart
Setelah disetting, silahkan reload kembali websitenya.
Beberapa Tambahan
Jika setelah disetting CORS masih tidak ada (resource blocked) silahkan cari dokumentasi CDN masing – masing karena kemungkinan ada settingan tambahan.
Jika pakai OpenLiteSpeed dan masih bingung langkah – langkahnya bagaimana, langsung kunjungi tautan ini
Nah, jadi selamat mencoba yaa.
Jika masih ada yang bingung, bisa didiskusikan di kolom komentar. Terima kasih telah berkunjung 🙂