在部署博客到服务器的时候,出现的字体图标显示不正常的现象。
打开浏览器的控制台(F12),可以看到是字体跨域加载出现错误。
Access to font at 'https://xxx.file.myqcloud.com/layui/font/iconfont.ttf?v=240' from origin 'http://daha.cc' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
原因是因为我把静态资源存放在腾讯云对象存储cos上面,才出现的跨域问题,导致字体图标无法正常显示。
跨域解决方法
在腾讯云对象储存控制面板中的「基础配置」找到「跨域访问CORS设置」
点击「添加规则」,在来源Origin中填写自己的域名即可。
来源Origin中填写*
,表示允许所有域名跨域,或者直接填写自己的域名。
CDN跨域设置
如果对象存储使用了CDN,那么也可以在CDN进行跨域配置。
在「高级设置」中点击「添加HTTP Header」
选择参数Access-Control-Allow-Origin
取值*
即可,或者填写自己的域名。
注:配置可能需要几分钟后才能生效。
最后再访问博客主页,跨域问题解决,大功告成。