Question

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

错误

源自＆＃39; https://files.stubwire.com＆＃39;的字体已被跨源资源共享策略阻止加载：No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上。起源＆＃39; https://www.stubwire.com＆＃39;因此不允许访问。

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

我从http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

获得了Access-Control-Allow-Origin标头用法

这是另一个资源，提供了如何设置各种服务器（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>

Answer 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>

Answer 4

In your CSS where you are loading the font instead of an HTTP response, turn it into HTTPS.

For instance, in the code:

@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;

}

Make it:

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

Do this with all your fonts.

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

4 个答案: