Шрифты заблокированы в Cors веб-клиента
Пока я работал в локальной сети, все работало отлично, теперь я загружен на хостинг, и шрифты блокируются чем-то, о чем я никогда не слышал (CORS). Шрифты (и css, js и т. Д.) Находятся в поддомене, поскольку URL-адреса анализируются индексом (поэтому пути в домене не работают). CSS / JS работают нормально.
Это вывод в веб-консоли (Firefox):
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at /fonts/Oxygen-Regular.ttf. (Reason: CORS header 'Access-Control-Allow-Origin' missing). <unknown>
downloadable font: download failed (font-family: "Oxygen-Regular" style:normal weight:normal stretch:normal src index:0): bad URI or cross-site access not allowed source: /fonts/Oxygen-Regular.ttf styles.css:10:12
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at /fonts/Montserrat-Regular.ttf. (Reason: CORS header 'Access-Control-Allow-Origin' missing). <unknown>
downloadable font: download failed (font-family: "Montserrat-Regular" style:normal weight:normal stretch:normal src index:0): bad URI or cross-site access not allowed source: /fonts/Montserrat-Regular.ttf styles.css:6:12
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at /fonts/glyphicons-halflings-regular.woff2. (Reason: CORS header 'Access-Control-Allow-Origin' missing). <unknown>
downloadable font: download failed (font-family: "Glyphicons Halflings" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed source: /fonts/glyphicons-halflings-regular.woff2 bootstrap.css:267:12
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at /fonts/glyphicons-halflings-regular.woff. (Reason: CORS header 'Access-Control-Allow-Origin' missing). <unknown>
downloadable font: download failed (font-family: "Glyphicons Halflings" style:normal weight:normal stretch:normal src index:2): bad URI or cross-site access not allowed source: /fonts/glyphicons-halflings-regular.woff bootstrap.css:267:12
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at /fonts/glyphicons-halflings-regular.ttf. (Reason: CORS header 'Access-Control-Allow-Origin' missing). <unknown>
downloadable font: download failed (font-family: "Glyphicons Halflings" style:normal weight:normal stretch:normal src index:3): bad URI or cross-site access not allowed source: /fonts/glyphicons-halflings-regular.ttf bootstrap.css:267:12
Я искал эту проблему, но я не могу найти эту конкретную проблему со шрифтами и точным сообщением об ошибке.
РЕДАКТИРОВАТЬ:
Исправление заключается в том, чтобы включить заголовок для домена / папки, обслуживающей файлы. Конфигурация может быть либо в блоке виртуального хоста, либо в файле .htaccess (в папке, где находятся файлы). Я предпочитаю устанавливать его в блоке vhost:
<IfModule mod_headers.c>
SetEnvIf Origin "https://(www|sub1|sub2|sub3).domain.com)$" ACAO=$0
Header set Access-Control-Allow-Origin "%{ACAO}e" env=ACAO
Header set Access-Control-Allow-Methods "GET"
</IfModule>
В этом примереAccess-Control-Allow-Origin
отправит только заголовок для домена и поддоменов, занесенных в белый список. Я перенаправляю сdomain.com
вwww.domain.com
так что этот пример не примет домен безwww
.