解决css引用本地字体不同域名打开提示跨域

136 6

其实以前也有出现过类似的问题,但是第二次来查看的时候又没有报错,其实问题主要是在于域名访问上的问题,当我在一级域名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;
}

我没有这个环境,这个代码可以自行测试一下,如果成功可以在下面留言,方便其他人确定是否适用。

0
  • 本文分类:教程
  • 本文标签:字体跨域
  • 流行热度:已超过 136 人围观了本文
  • 发布日期:2019年06月11日 - 13时51分42秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿站点。未经许可,禁止转载。
微信收款码
微信收款码