Kako riješiti CORS greške za font datoteke

Postavili ste CDN i sada imate problem s fontovima, evo rješenja.

CORS greške s fontovima nastaju kada su vaša stranica i CDN na različitim domenama — preglednik blokira učitavanje fontova s druge domene osim ako CDN to izričito ne dozvoli. Ovo je vrlo česta CDN pogrešna konfiguracija.

Apache

Dodajte ovaj blok na sam početak .htaccess datoteke i htaccess.conf datoteke:

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

Korištenje * dozvoljava bilo kojoj domeni korištenje fontova. Za strožu sigurnost, zamijenite * sa svojom specifičnom domenom, na primjer Access-Control-Allow-Origin "https://vasa-domena.com". Time osiguravate da samo vaša web stranica može učitavati fontove, sprječavajući hotlinking s drugih stranica.

Nginx

Dodajte ovaj blok u virtual host datoteku i ponovno pokrenite Nginx:

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

Za strožu sigurnost, zamijenite * sa specifičnim porijeklom: add_header Access-Control-Allow-Origin "https://vasa-domena.com";.

Cloudflare

Ako koristite Cloudflare, CORS headeri se mogu postaviti putem Page Rules ili Transform Rules bez uređivanja konfiguracije servera. Kreirajte Transform Rule koja dodaje Access-Control-Allow-Origin header za ekstenzije font datoteka, dajući vam način bez kodiranja za rješavanje CORS-a na cijeloj zoni.

Nakon što dodate pravila, još je potrebno invalidirati datoteke spremljene na CDN-u kako bi novi headeri bili preuzeti od strane posjetitelja.