当前位置:首页 > 笔记 > 前端 > 正文内容

Font-Awesome字体跨域无法正常显示的问题解决

2年前 (2023-02-12)前端7350

网页使用 Font Awesome 字体图标时图标不能正常显示,浏览器控制台出现“@font-face 跨源请求失败。资源访问受限”的错误提示,出现该错误的原因是浏览器的同源策略机制导致。解决方法是使用跨域资源共享(CORS)机制,跨域资源共享标准新增了一组 HTTP 首部字段,允许服务器声明哪些源站有权限访问哪些资源。

Nginx下Font-Awesome字体跨域无法正常显示的问题解决


在nginx的配置文件下新增

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


新增后重启nginx直接就可以解决了。


apache 服务器可以通过 .htaccess 文件添加:

<FilesMatch ".(eot|ttf|svg|woff)">Header set Access-Control-Allow-Origin "*" 
#表示允许所有的源来访问资源,也可已指定域名,如 www.yuucn.comHeader set Access-Control-Allow-Methods "*" #允许请求的方法 GET POST等

扫描二维码推送至手机访问。

版权声明:本文由蓝博发布,如需转载请注明出处。

本文链接:https://www.blueboss.cn/p/951.shtml

“Font-Awesome字体跨域无法正常显示的问题解决” 的相关文章

CSS 圆角 样式表

CSS 圆角 样式表

css 样式表1.CSS 圆角CSS border-radius 属性//实例1     #rcorners1 {   border-radius: 25px;   background:&nb...

设置input 文本框 不可编辑修改,input框禁止输入

设置input 文本框 不可编辑修改,input框禁止输入

设置input 文本框 不可编辑修改,input框禁止输入在input文本框上添加readonly="readonly"属性,代码:<input type="text" value="设置只读" read...

Js代码直接显示当年的年份 适合网站页脚做版权

Js代码直接显示当年的年份 适合网站页脚做版权

演示: ©2018-2023 可以直接复制使用,修改一下开始的年份即可,自动生成到今年的年份。 比如今年 2023 年 所展示的是 2018-2023代码如下:<p>© 2018-<script type="text/javascript"&...