腾讯云cos对象存储css字体跨域解决方法

风信子 2021-06-26 19:25:54 4223℃

在部署博客到服务器的时候,出现的字体图标显示不正常的现象。

打开浏览器的控制台(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取值*即可,或者填写自己的域名。

注:配置可能需要几分钟后才能生效。

最后再访问博客主页,跨域问题解决,大功告成。

标签: HTML, CSS, 跨域

非特殊说明,本博所有文章均为博主原创。