☰

nginx + @font-face + Firefox / IE9

tag-icon • tag-icon nginx http-headers
nginx + @font-face + Firefox / IE9

刚刚将我的网站从共享主机转移到 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前面级别的所有先前方向。

相关内容