运用Nginx实现跨域使用字体文件的配置的方法

最新推荐文章于 2024-05-10 16:15:12 发布

转载最新推荐文章于 2024-05-10 16:15:12 发布 · 1.7k 阅读

本文介绍了一种使用Nginx解决跨域引起的字体加载失败的方法，通过配置Http_Headers_Module模块，添加Access-Control-Allow-Origin等头部信息，实现了子域名对根域名字体资源的正确访问。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文主要给大家介绍了关于Nginx跨域使用字体文件的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍：
　　问题描述
　　今天在使用子域名访问根域名的CSS时，发现字体无法显示，在确保CSS和Font字体的路径加载无问题后，基本确定是因为跨域的问题。百度收录批量查询
　　通过Nginx模块Http_Headers_Module来添加Access-Control-Allow-Origin允许的地址
　　console报错信息
　　ccess to Font at ‘http://w001.static.akhack.com/css/KohinoorBangla-Regular.ttf’ from origin ‘http://carey.akhack.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://carey.akhack.com’ is therefore not allowed access.
　　解决方法
　　location ——* .(eot|ttf|woff|svg|otf)$ {
　　add_header Access-Control-Allow-Origin http://carey.akhack.com;
　　add_header Access-Control-Allow-Headers X-Requested-With;
　　add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
　　}
　　注意
　　add_header Access-Control-Allow-Origin http://carey.akhack.com;
　　//只允许单域名或者 ‘’ 。不推荐 ‘’ ，会导致安全问题