Cara Mengatasi fontawesome tidak terbaca diblock CORS

Cara Mengatasi fontawesome tidak terbaca diblock CORS

web wordpress yang menggunakan subdomain untuk content statis seringkali dihadapkan pada masalah dimana font tidak terbaca dikarenakan diblock oleh CO

Sakatheme – Free WordPress Theme from Bestari Themes
10 Tips Memikat Pembeli di Toko Online
Lima Kesalahan SEO yang Harus dihindari

web wordpress yang menggunakan subdomain untuk content statis seringkali dihadapkan pada masalah dimana font tidak terbaca dikarenakan diblock oleh CORS policy. Masalah CORS policy ini bisa diketahui dengan menggunakan inspect element.
Misal 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>

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

Jika web server anda menggunakan NGINX, edit /etc/nginx/sites-enabled/static.domainanda.com (sesuaikan nama file virtual host di nginx server anda), kemudian tambahkan:

location ~* \.(eot|ttf|woff|woff2)$ {
    add_header Access-Control-Allow-Origin *;
}

setelah itu restart nginx dengan perintah:

service nginx restart

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

COMMENTS

WORDPRESS: 0
DISQUS: 0