Mengaktifkan CORS (Cross-origin resource sharing) dengan htaccess

Kali ini pembahasan saya lebih teknis dan berhubungan dengan pemasangan layanan Content Delivery Network pada website. Ceritanya kalau anda mengaktifkan begitu saja dan konten (gambar, video, audio) dari situs langsung dilayankan dari subdomain (misal cdn.utekno.com) sebenarnya tidak ada masalah, tapi kalau anda menggunakan WebFont (ttf, ttc, otf, eot, woff, woff2) besar kemungkinan tidak akan muncul. Akan digantikan simbol kotak – kotak di browser yang berarti file font tersebut gagal dimuat.

Yang kalau dianalisa lebih lanjut di Chrome Developer Tools (tekan F12) akan muncul pesan error:
Font from origin https://cdn.utekno.com has been blocked from loading by Cross-Origin Resource Sharing policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin https://utekno.com is therefore not allowed access.

Perhatikan di sebelah nama penulis munculnya simbol kotak, aslinya kalau sudah benar adalah icon orang yang diambil dari fontnya. Seperti FontAwesome, Genericons dan sebagainya.

Ini solusinya kalau anda menggunakan shared hosting dengan cPanel biasanya akan cukup mudah, silahkan buka file .htaccess yang ada di dalam hosting anda dan tambahkan kode – kode berikut:

<IfModule mod_setenvif.c>
 <IfModule mod_headers.c>
 # mod_headers, y u no match by Content-Type?!
 <FilesMatch "\.(gif|png|jpe?g|svg|svgz|ico|webp)$">
 SetEnvIf Origin ":" IS_CORS
 Header set Access-Control-Allow-Origin "*" env=IS_CORS
 </FilesMatch>
 <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
 Header set Access-Control-Allow-Origin "*"
 </FilesMatch>
 </IfModule>
</IfModule>

Setelah itu coba cek lagi situs anda, semestinya tampilannya akan normal kembali dan CDNnya pun bisa maksimal. Oh ya, saya mengalami masalah ini saat menggunakan MaxCDN.