CSS - Шрифт заблокирован от политики совместного использования ресурсов Cross-Origin

На моем сайте https://www.stubwire.com, когда люди начинают процесс заказа, я загружаю файл CSS с https://files.stubwire.com. Проблема в том, что файл CSS пытается загрузить шрифт, выдающий ошибку. Может ли кто-нибудь помочь мне показать, как решить эту проблему? Мои исправления, которые я видел, говорят об использовании Amazon S3, но это загрузка с наших собственных серверов.

ошибка

Шрифт от источника " https://files.stubwire.com " был заблокирован от загрузки по политике совместного использования ресурсов Cross-Origin: заголовок "Access-Control-Allow-Origin" отсутствует на запрошенном ресурсе. Следовательно, источник https://www.stubwire.com 'не допускается.

CSS Код Источник: https://files.stubwire.com/static/stubwire_v3/style.css?date=20141213

@font-face {
    font-family: 'DroidSansRegular';
    src: url('fonts/DroidSans-webfont.eot');
    src: url('fonts/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/DroidSans-webfont.woff') format('woff'),
         url('fonts/DroidSans-webfont.ttf') format('truetype'),
         url('fonts/DroidSans-webfont.svg#DroidSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Ответ 1

Если вы управляете сервером, вы можете настроить параметры своего сервера Apache/Nginx или что угодно, чтобы добавить заголовок Access-Control-Allow-Origin в ваши ответы HTTP.

В вашем случае вы, вероятно, хотите что-то вроде этого (это позволит вашему домену получить доступ к шрифтам, но не позволит другим доменам использовать его, включая ваши собственные поддомены):

Access-Control-Allow-Origin: https://www.stubwire.com

Я получил использование заголовка Access-Control-Allow-Origin: http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

Вот еще один ресурс, который дает примеры того, как настроить различные серверы (IIS, Nginx, Apache), чтобы добавить заголовок Access-Control-Allow-Origin: http://support.maxcdn.com/how-to-use-cdn -с-Веб - шрифты/

Ответ 2

Если у вас не включен mod_headers вы можете включить его

sudo a2enmod headers

И тогда в вашем VirtualHost или .htaccess

# Allow access from all domains for webfonts.
# Alternatively you could only whitelist your
# subdomains like "subdomain.example.com".

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

Ответ 3

для меня этот код работал отлично. убедитесь, что вы изменили свой домен.

<ifmodule mod_headers.c="">
   SetEnvIf Origin "^(.*\.domain\.com)$" ORIGIN_SUB_DOMAIN=$1
   Header set Access-Control-Allow-Origin "%{ORIGIN_SUB_DOMAIN}e" env=ORIGIN_SUB_DOMAIN
   Header set Access-Control-Allow-Methods: "*"
   Header set Access-Control-Allow-Headers: "Origin, X-Requested-With, Content-Type, Accept, Authorization"
</ifmodule>

Ответ 4

В CSS, где вы загружаете шрифт вместо ответа HTTP, превратите его в HTTPS.

Например, в коде:

@font-face {
font-family: 'DroidSansRegular';
src: url('http://...fonts/DroidSans-webfont.eot');
src: url('fonts/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/DroidSans-webfont.woff') format('woff'),
     url('fonts/DroidSans-webfont.ttf') format('truetype'),
     url('fonts/DroidSans-webfont.svg#DroidSansRegular') format('svg');
font-weight: normal;
font-style: normal;

}

Сделай это:

src: url('https://...fonts/DroidSans-webfont.eot');

Сделайте это со всеми вашими шрифтами.