Cara mengaktifkan CORS di Apache

Mengaktifkan CDN (Content Delivery Network) kadang tidak berlangsung normal begitu saja, walaupun gambar sudah dimuat dari server CDN tapi cukup sering ternyata font yang disisipkan gagal ditampilkan. Yang muncul adalah simbol kotak – kotak yang seharusnya adalah salah satu karakter dari font. Ini saya alami saat baru saja memasangkan MaxCDN di blog WordPress dalam server LAMP (Linux, Apache, MySQL, PHP) saya, jadi FontAwesome tidak dimuat browser ternyata.

Secara resminya karena file font tersebut dimuat dari lokasi lain bukan pada domain yang sama (pihak ketiga) maka tidak dimuat oleh Mozilla Firefox atau Google Chrome karena merupakan resiko keamanan. Untuk menggunakannya maka kita perlu mengaktifkan dukungan CORS (Cross-Origin Resource Sharing), dan ini bisa dilakukan pada 3 tempat yang berbeda. 2 lewat Apache dan 1 tergantung CDNnya. Silahkan pilih yang termudah bagi anda.

Opsi pertama: .htaccess

Solusi ini cocok bagi yang tidak memiliki akses ke server hostingnya atau sedang tidak ingin ribet mengutak – atik setting VPS. Anda tinggal menambahkan kode berikut dalam file .htaccess:

<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

Fungsinya untuk menginstruksikan Apache bahwa file – file dengan ekstensi tersebut akan ditambahkan kode header Access-Control-Allow-Origin "*", jadi bebas dimuat dari alamat URL manapun.

Opsi kedua: Konfigurasi Apache

Alternatifnya anda bisa menambahkan langsung instruksinya dalam konfigurasi server Apache (httpd.conf atau apache.conf), dan letakkan kode berikut dalam bagian <Directory>, <Location>, <Files> atau <VirtualHost> didalamnya:

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

Kalau ini berarti akan disisipkan untuk semua jenis file, dan agar digunakan segera reload layanan Apache di server:

service apache2 reload

Bagaimana kalau masih gagal juga? Mungkin dalam web server Apache belum ada dukungan mod_headers, silahkan install dulu:

a2enmod headers

Kemudian silahkan restart Apache untuk mengaktifkan dukungan modifikasi headers HTTP/HTTPS.

Opsi ketiga: Cek setting CDN anda

Pada beberapa penyedia CDN kadang ada setting untuk menambahkan header CORS ini. Misal di MaxCDN bisa diubah dalam pengaturan EdgeRules dan pada KeyCDN tinggal mengubah CORS ke Enabled.

Semoga bermanfaat. 🙂