解决css引用本地字体不同域名打开提示跨域
其实以前也有出现过类似的问题，但是第二次来查看的时候又没有报错，其实问题主要是在于域名访问上的问题，当我在一级域名mulingyuer.com访问时就会出现跨域，原因是因为php转换后的css文件链接是二级域名下的www.mulingyuer.com，为此，即便是css引用的是本地的字体文件还是会提示跨域的问题，为此我查了下，发现后端就有很方便的解决办法。
首先我是根据我自己的运行环境写的这篇博文，使用宝塔面板，使用阿帕奇，这里就简单说下解决方法：
首先我们要确定阿帕奇已经开启了mod_headers模块，具体方法直接在宝塔里找到配置--然后ctrl+f 搜索：LoadModule headers_module modules/mod_headers.so；如果能搜到有一段前面没有加#号的，那么就表示开启了，你只需要在配置的最末尾，添加这段代码即可：
<FilesMatch "\.(ttf|otf|eot|woff|svg|woff2)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
保存后再去刷新网页，问题解决。
如果是nginx，可以尝试在配置里添加这段：
location ~* \.(eot|ttf|woff|svg|otf)$ {
add_header Access-Control-Allow-Origin *或域名;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
}我没有这个环境，这个代码可以自行测试一下，如果成功可以在下面留言，方便其他人确定是否适用。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可，禁止转载。
全部评论 6
约P加我
QQ Browser Android Pie木灵鱼儿
FireFox Windows 10约P加我
QQ Browser Android Pie木灵鱼儿
FireFox Windows 10小仙女
QQ Browser iPhone木灵鱼儿
FireFox Windows 10