violates the following Content Security Policy directive:default-src *谷歌iconfont图标显示方块 拒绝加载字体违反安全策略

项目运行没有问题,iconfont的css文件什么的导入也没有问题。
但是用谷歌iconfont 的图标都是小方块!
在这里插入图片描述
打开控制台报这个错误:
Refused to load the font ‘’ because it violates the following Content Security Policy directive: “default-src *”. Note that ‘font-src’ was not explicitly set, so ‘default-src’ is used as a fallback.
在这里插入图片描述

我再打开IE浏览器,IE浏览器是正常显示出小图标的,我佛了!我就想到是不是浏览器不兼容?然后各种百度。。。
我又开始了我的抄代码之路,一堆Baidu博客说是要在index.html文件头部标签里加默认值,于是我改,改成了
<meta http-equiv=“Content-Security-Policy” content=“default-src ; style-src ‘self’ http:// ‘unsafe-inline’; script-src ‘self’ http://* ‘unsafe-inline’ ‘unsafe-eval’” font-src * data:; />
好了有默认值了,运行。。。毫无改变,还是一样的错误。

于是我再改。。。在经过我3个小时的努力下,打开n多博客。。。这图标毫无变化呢。。。这vue真棒,真是个可爱的框架!能在我这种魔性修改下毫无变化。
我知道我再不去问大佬的话我是要交代在这了。
于是我去问了,大佬很快给了解决方式。
1:将index.html里的头部标签修改一下改成

 <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,er-scalable=no">

然后iconfont的一些样式包只需要下面这四个就行了
在这里插入图片描述
于是我认真修改,保存,运行,一气呵成。打开谷歌,出来了图标它出来了~并且控制台那个错误也消失了 ~
再给出一个参考地址
各位加油~

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值