每天学习一点点,成功增加一大步

Nginx服务器端解决font字体文件跨域

Nginx zhanghui 3510℃

这两天的实践学习中遇到了 font 跨域访问被拦截的问题,我将是一些常用的静态资源文件放到了服务器,通过一个域名进行引用,一来是方便各项目在使用时方便引用,二来是降低静态资源文件对服务器空间的占用,但没有想到在访问 bootstrapr的font字体图标被拦截了。在调试时谷歌浏览器和火狐浏览器的提示会不一样。

谷歌调试工具提示:Font from origin ‘http://yourdomain’ has been blocked from loading by Cross-Origin Resource Sharing policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://192.168.1.16:83’ is therefore not allowed access.

谷歌浏览器 拦截 font 提示

火狐调试工具提示:已拦截跨源请求:同源策略禁止读取位于 http://yourdomain/字体文件的路径/glyphicons-halflings-regular.woff2 的远程资源。(原因:CORS 头缺少 ‘Access-Control-Allow-Origin’)。

火狐浏览器 拦截 font 提示

通过在网络上搜索解决方案,通过亲测得到有效的解决方法是通过Nginx模块HttpHeadersModule来添加Access-Control-Allow-Origin允许的地址。

在Nginx的conf目录下修改nginx.conf或者是修改vhost下的放置font文件的域名的.conf,添加以下代码:

 location ~* \.(eot|ttf|woff|svg|otf)$ {
     add_header Access-Control-Allow-Origin *;
}

就能解决问题

转载请注明:隨習筆記 » Nginx服务器端解决font字体文件跨域