CSS - 阻止跨源资源共享策略的字体

Question

在我的网站https://www.stubwire.com上,当人们开始订购流程时,我正在从https://files.stubwire.com加载CSS文件.问题是CSS文件正在尝试加载给出错误的字体.有人可以帮我告诉我如何解决这个问题吗？我已经看过关于使用Amazon S3的修复,但这是从我们自己的服务器加载.

错误

来自" https://files.stubwire.com "的字体已被跨源资源共享策略阻止加载:请求的资源上没有"Access-Control-Allow-Origin"标头.因此,不允许访问" https://www.stubwire.com ".

CSS代码 来源:https://files.stubwire.com/static/stubwire_v3/style.css？日期= 20141413

@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

如果您尚未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>