Chyba "Cross-origin resource sharing" (CORS) může být frustrující pro vývojáře pracující na webových aplikacích, které zahrnují použití vlastních nebo externích fontů definovaných v CSS. Tento článek se zaměřuje na podrobné vysvětlení toho, co CORS znamená, proč tato chyba nastává při používání CSS fontů a jaké jsou nejlepší praktiky a řešení k jejímu odstranění.
Co je CORS?
CORS, neboli "Cross-origin resource sharing", je bezpečnostní mechanismus prohlížečů, který umožňuje webovým stránkám požadovat zdroje z jiného původu (domény, schématu a portu) než je původ aktuální stránky. CORS chrání uživatele tím, že brání zlomyslným webovým stránkám v čtení citlivých dat z jiných stránek bez explicitního povolení od serveru, na kterém jsou data hostována.
Proč CORS ovlivňuje načítání CSS fontů?
Když Webová stránka požaduje zdroje, jako jsou fonty z jiného původu, prohlížeče používají CORS politiku k určení, zda by měl být požadavek povolen. Pokud server, na kterém jsou fonty hostovány, nenastavil hlavičky CORS tak, aby explicitně povoloval požadavky z původu webové stránky, prohlížeč požadavek zablokuje a v konzoli vyvolá chybu CORS.
Řešení problému s CORS při používání CSS fontů
1. Přidání CORS hlaviček na server
Nejúčinnější způsob, jak řešit chybu CORS při načítání fontů, je přidání příslušných CORS hlaviček na server, který fonty hostuje. To může zahrnovat nastavení hlavičky Access-Control-Allow-Origin na serveru. Například pro Apache může být konfigurace:
<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
Pro Nginx by konfigurace mohla vypadat takto:
location ~* \.(eot|ttf|woff|woff2)$ {
add_header Access-Control-Allow-Origin *;
}
Tímto způsobem server povolí webovým stránkám načítat fonty bez ohledu na jejich původ.
2. Použití Proxy serveru
Pokud nemáte přístup k serverové konfiguraci nebo pokud fonty pocházejí z externí služby, která neumožňuje změnit CORS politiku, můžete použít proxy server. Proxy server bude fungovat jako prostředník, který přeposílá požadavky mezi vaší webovou stránkou a serverem s fonty, přičemž bude přidávat potřebné CORS hlavičky.
3. Lokální hostování fontů
Dalším řešením je hostovat fonty přímo na stejném serveru jako vaši webovou aplikaci. Tím se vyhnete problémům s CORS, protože požadavky na fonty již nebudou cross-origin. Při použití této metody je důležité zajistit, že máte práva fonty distribuovat.
Chyby CORS při načítání CSS fontů lze efektivně řešit správnou serverovou konfigurací, použitím proxy serveru nebo lokálním hostováním fontů. Správným přístupem a implementací těchto řešení můžete zajistit, že vaše webové aplikace budou načítat fonty hladce a bezpečně napříč všemi prohlížeči a zařízeními.
