Cara Setting CORS di Webserver

Cara Setting CORS di Webserver

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.

Cara Setting CORS
CORS yang tidak disetting

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

 

CORS
Resource Blocked

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 :

  1. Buka webadmin console LiteSpeed
  2. Buka menu VirtualHosts (disebelah kiri)
  3. Pilih domain yang akan disetting CORS nya
  4. Pilih tabs context
  5. Pilih menu add (disebelah pojok kanan atas)
  6. Pilih type : Static (jangan yang lain), klik next
  7. Isikan URI dengan “/ ” (tanpa tanda petik)
  8. Isikan location dengan direkotri root domain misalkan /home/domainku.id/public_html/
  9. Accesible pilih YES
  10. Pada menu Extra Headers, isikan Access-Control-Allow-Origin *
  11. 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 🙂

Leave a Comment