Nginx实现跨域使用字体文件的配置详解
更新时间：2017年06月26日 09:12:14 作者：Carey
这篇文章主要给大家介绍了关于Nginx实现跨域使用字体文件的配置方法，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
本文主要给大家介绍了关于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; //只允许单域名或者 ‘*' 。不推荐 ‘*' ，会导致安全问题
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
相关文章
nginx提示：500 Internal Server Error错误解决办法
这篇文章主要介绍了 nginx提示：500 Internal Server Error错误解决办法的相关资料,这里提供了解决该问题的详细步骤，希望能帮助到大家，需要的朋友可以参考下2017-08-08
这篇文章主要介绍了详解nginx.conf 中 root 目录设置问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
我们在使用的时候会遇到很多的恶意IP攻击,这个时候就要用到Nginx 禁止IP访问了,下面这篇文章主要给大家介绍了关于Nginx如何限制IP访问只允许特定域名访问的相关资料,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了CentOS利用Nginx搭建下载功能服务器,需要的朋友可以参考下2017-06-06
本文主要介绍了nginx快速部署一个网站服务，并实现多域名和多端口，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-10-10
反向代理：反向代理也叫reverse proxy,指的是代理外网用户的请求到内部的指定web服务器,并将数据返回给用户的一种方式,这是用的比较多的一种方式,下面这篇文章主要给大家介绍了关于Nginx反向代理的相关资料,需要的朋友可以参考下2021-08-08
文章详细介绍了如何在同一端口下部署PC端和App端项目,包括Nginx配置、前端打包配置、manifest.json配置以及针对Vue3+vite项目的特殊配置,通过示例项目A和项目B,展示了如何修改Vite配置文件、调整路由配置,并通过Nginx进行关键配置2026-01-01
在使用 Nginx 作为 Web 服务器时,有时会遇到客户端尝试上传大文件时返回 413 Request Entity Too Large 的错误,本文将介绍如何通过配置 Nginx 来解决这个问题,有需要的可以参考下2025-05-05
这篇文章主要介绍了Nginx部署JavaWeb项目全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
本文详细介绍了如何配置Nginx作为下载服务器,包括基本配置指令、location块配置、Content-Disposition头部信息、sendfile指令、文件系统权限设置以及访问控制,通过实验,验证了Nginx在文件下载场景中的高效和安全性2025-12-12
最新评论