Sabtu, 07 Januari 2017

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

0 comments:

Posting Komentar

Contact

Send Me A Email

Address

ContactInfo

Address:

Perumnas Sako, Palembang, South Sumatra, Indonesia

Phone:

+6281228289766

Email:

amperakoding@gmail.com