![nginx + @font-face + Firefox / IE9](https://linux22.com/image/567412/nginx%20%2B%20%40font-face%20%2B%20Firefox%20%2F%20IE9.png)
刚刚将我的网站从共享主机转移到 Linode 的 VPS,而且我对 nginx 也完全陌生,所以如果我错过了一些明显的东西,请不要太苛刻 ^^
我的 WordPress 网站在 nginx 和 MaxCDN 上运行良好,但我的 @font-face 字体(由 cdn.domain.com 提供)在 IE9 和 FF 中停止工作(@font-face 跨源请求失败。资源访问受到限制。)
我已经在 Google 上搜索了几个小时,并尝试将以下所有内容添加到我的配置文件中:
location ~* ^.+\.(eot|otf|ttf|woff)$ {
add_header Access-Control-Allow-Origin *;
}
location ^/fonts/ {
add_header Access-Control-Allow-Origin *;
}
location / {
if ($request_filename ~* ^.*?/([^/]*?)$)
{
set $filename $1;
}
if ($filename ~* ^.*?\.(eot)|(otf)|(ttf)|(woff)$){
add_header 'Access-Control-Allow-Origin' '*';
}
}
当然,每次更改后我都会重新启动 nginx。
无论我做什么,标题根本就不会被发送。
我有默认的 Ubuntu apt-get build nginx,它默认应该包含 headers 模块...我如何检查安装了哪些模块,或者还有什么可能导致此错误?
更新:
我尝试运行curl -I [location-of-the-font]
并且它确实返回了Access-Control-Allow-Origin: *
,但是标题在 Chrome 的网络面板中不可见,并且字体在 FF 和 IE9 中仍然不起作用(CSS3117:@font-face 跨域请求失败。资源访问受到限制。) - 有什么想法可能导致这种情况吗?
答案1
唯一能给出的建议是,你必须:(1)确保清除浏览器中的缓存;(2)确保add_header
处于适当的水平。
到处定义它没什么意义。如果所有字体都是从 内部提供的location /fonts
,那么这是您必须声明适当 的唯一位置add_header
,并且您还必须确保其他子位置也没有任何其他add_header
指令,因为这会重置add_header
前面级别的所有先前方向。