解决使用CDN后无法加载TTF字体文件-动静分离网站加速

        为了进一步提升站点的访问速度,同时不想在主域名上使用cdn,那么就只能对网站的静态资源下手了,嗯~ o(* ̄▽ ̄*)o没错,就是动静分离,不过这次的只能说小分离o_o
    在腾讯云上开通了cdn,专门解析了一个域名做静态资源加速,js、css啥的都放置好了,更改php头文件,也生效了,但奇怪的是网站部分图标没有显示出来,如下图:
f.jpg
    立即打开F12查看,发现ttf字体文件没有加载进来,如下图:
a.jpg

显示failed,随后又看了一下具体的报错:
b.jpg
英语不好,所以头有点大,此处用在线翻译查看一下:
Access to font at 'http://cdn.xuboke.cn/fonts/fontawesome-webfont.woff2' from origin 'http://www.xuboke.cn' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
有道翻译过后:
访问字体在'http://cdn.xuboke.cn/fonts/fontawesome-webfont.woff2'从来源'http://www.xuboke.cn'已被CORS的政策封锁:没有'访问控制-允许来源'头在请求的资源。
咳咳,这下就看得懂了,能猜出大概意思,就是没有header”头“放行,不允许从源站点加载cdn的字体文件,知道问题出在哪了,我们再去cdn控制台,添加一下HttpHeader参数,如下两点:
Access-Control-Allow-Origin : *
accept : */*
Access-Control-Allow-Origin参数是控制我们的访问允许来源,
accept参数是接收限制,我们都设置成如下图的样子就行了:
d.jpg
最后我们刷新一下cdn节点缓存(此处可能需要2-3分钟生效时间),然后回到我们的浏览器,刷新之后发现字体文件正常加载,图标也显示正常,网页加载速度也得到提升,如图:
g.jpg
到这里,关于cdn无法加载字体文件的问题就已经解决了,有任何问题欢迎在文章下留言哦。
作者:徐先森 文章名: 《解决使用CDN后无法加载TTF字体文件-动静分离网站加速》
收录情况: 百度已收录
版权说明:若无特别注明,本文皆为 "徐博客”原创,转载请保留出处!

相关推荐

网友评论(已关闭)