CSS - 跨源资源共享策略阻止字体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27726802/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS - Font being blocked from Cross-Origin Resource Sharing Policy
提问by Brad Wickwire
On my website https://www.stubwire.comwhen 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.
在我的网站https://www.stubwire.com 上，当人们开始订购流程时，我正在从https://files.stubwire.com加载 CSS 文件。问题是 CSS 文件试图加载给出错误的字体。有人可以帮我看看如何解决这个问题吗？我看到我的修复谈论使用 Amazon S3，但这是从我们自己的服务器加载的。
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.
来自源“ https://files.stubwire.com”的字体已被跨源资源共享策略阻止加载：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问Origin ' https://www.stubwire.com'。
CSS CodeSource: https://files.stubwire.com/static/stubwire_v3/style.css?date=20141213
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;
}
采纳答案by Gohn67
If you control the server, then you can adjust the settings of your server Apache/Nginx or whatever to add the Access-Control-Allow-Originheader to your HTTP responses.
如果您控制服务器，那么您可以调整您的服务器 Apache/Nginx 的设置或任何将Access-Control-Allow-Origin标头添加到您的 HTTP 响应的设置。
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-Originheader usage from: http://en.wikipedia.org/wiki/Cross-origin_resource_sharing
我Access-Control-Allow-Origin从以下位置获得了标题用法：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-Originheader: http://support.maxcdn.com/how-to-use-cdn-with-webfonts/
这是另一个资源，提供了如何设置各种服务器（IIS、Nginx、Apache）以添加Access-Control-Allow-Origin标头的示例：http: //support.maxcdn.com/how-to-use-cdn-with-webfonts/
回答by Hosam alzagh
If you don't have mod_headersenabled you can enabled it with
如果你没有mod_headers启用，你可以启用它
sudo a2enmod headers
sudo a2enmod headers
And then in your VirtualHostor .htaccess
然后在你的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>
回答by Harshal Lonare
for me, this code worked perfectly. make sure you change your domain.
对我来说，这段代码工作得很好。确保您更改了域。
<ifmodule mod_headers.c="">
SetEnvIf Origin "^(.*\.domain\.com)$" ORIGIN_SUB_DOMAIN=
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>
回答by user3409468
In your CSS where you are loading the font instead of an HTTP response, turn it into HTTPS.
在您加载字体而不是 HTTP 响应的 CSS 中，将其转换为 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.
对所有字体执行此操作。
