Cara Mengatasi WebFont yang Tidak Terbaca atau diblok oleh CORS Policy



Artikel kali ini akan membahas tentang Bagaimana Cara Mengatasi Font yang Tidak Terbaca atau diblok oleh CORS Policy. Masalah ini pernah saya temui di salah 1 website saya, font yang diambil dari google dan fontawesome tidak terload atau tidak terbaca padahal struktur dan pemanggilan file telah sesuai. Ketika di inspect element dari browser barulah ketahuan problemnya.

Error yang muncul seperti berikut:

Access to Font at 'https://namawebanda.com/assets/template/frontend/css/fonts/fontawesome-webfont.woff2?v=4.6.3' from origin 'https://namawebanda.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.namawebanda.com' is therefore not allowed access.


Cara Mengatasinya

Oke, cara mengatasinya sangat mudah dengan cara:
  1. Buatlah file .htaccess pada folder project Anda
  2. Copy dan paste kode berikut ke dalam file .htaccess tersebut:
    <IfModule mod_headers.c>
      <FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css|css)$">
        Header set Access-Control-Allow-Origin "*"
      </FilesMatch>
    </IfModule>
  3. Apabila ingin mendapatkan penjelasan lebih lengkap Anda bisa ke link berikut: klik disini
Semoga bermanfaat

Posting Komentar

Lebih baru Lebih lama