CSS-字体被跨域资源共享策略阻止 [英] CSS - Font being blocked from Cross-Origin Resource Sharing Policy

问题描述

在我的网站 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?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;

}

解决方案

如果您控制服务器，则可以调整服务器Apache/Nginx的设置或将Access-Control-Allow-Origin标头添加到HTTP响应的内容./p>

在您的情况下，您可能想要类似的东西(这将允许您的域访问字体，但阻止其他域使用它，包括您自己的子域):

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标头的示例:https://www.stubwire.com when people start an order process I am loading the CSS file from https://files.stubwire.com. The problem is that the CSS file is trying to load the font giving the error. Can someone help show me how to fix this issue? My fixes I have seen talk about using Amazon S3 but this is loading from our own servers.

Error

Font from origin 'https://files.stubwire.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.stubwire.com' is therefore not allowed access.

CSS Code Source: 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;

}

解决方案

If you control the server, then you can adjust the settings of your server Apache/Nginx or whatever to add the Access-Control-Allow-Origin header to your HTTP responses.

In your case, you probably want something like (this will allow your domain to access the fonts, but prevent other domains from using it, including your own subdomains):

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

I got the Access-Control-Allow-Origin header usage from: http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

Here is another resource that gives examples of how to set up various servers (IIS, Nginx, Apache) to add the Access-Control-Allow-Origin header: http://support.maxcdn.com/how-to-use-cdn-with-webfonts/

这篇关于CSS-字体被跨域资源共享策略阻止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！