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

Question

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

Ошибка

шрифт от происхождения 'https://files.stubwire.com' был заблокирован нагружении политики Cross-Origin Resource Sharing: Нет '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; 

} 

Answer 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-with-webfonts/

Answer 2

В вашем 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'); 

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