Permasalahan Cross-Origin Request Blocked di web sering kali ditemui pada web wordpress yang menggunakan subdomain untuk content statis. bagaimana cara mengatasi masalah ini di server apache?

sebagai contoh, domain utama anda adalah domainanda.com dan content static anda tempatkan di subdomain static.domainanda.com. Saat dilakukan inspect element pada web yang bermasalah pada display web font, di bagian bawah muncul error berikut:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://static.domainanda.com/plugins/sneeit-framework/fonts/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

untuk mengatasi masalah ini, cukup dengan menambahkan header “Access-Control-Allow-Origin”.

Cara Menambahkan header “Access-Control-Allow-Origin” di htaccess

untuk menambahkan header ini, tambahkan file .htaccess di domain static.domainanda.com, kemudian isi dengan baris berikut:

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

Jika yang diinginkan hanya untuk file Font saja, maka bisa dilengkapi menjadi:

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

Sumber gambar: https://www.keycdn.com/support/cors
Semoga bermanfaat

Write A Comment