• VPS日报会日常更新VPS优惠信息,推荐性价比高、好用的VPS,发布美国、日本等国外主机测评,提供最新的VPS优惠码。

网站加了CDN后字体图标无法显示/评论提交后无法加载的解决办法

其它教程 VPS日报 1周前 (10-13) 64次浏览 0个评论 扫描二维码

 

年初本站发表了一篇文章:2018 年 7 月起,Google Chrome 浏览器将标记所有 HTTP 网站为不安全链接。虽然当时想着要加上 SSL 证书,但是过了不久就忘了。直到最近才注意到 Chrome 浏览器在本站域名左侧标记了一个“不安全”。为了更好看一些,就给本站添加了 SSL 证书。现在本站的域名左侧已经上了一把小绿锁了。

既然搞定了 HTTPS,干脆也把CDN给加上,加快一点本站的访问速度。找了找国内支持 https 的免费 CDN 的有又拍云和腾讯云又拍云 CDN的免费方式是加入他们的推广联盟,在网站下方放置又拍云的 logo 和链接,即可每月获赠 15G CDN 流量。腾讯云则是开通 CDN 即赠送六个月,每月 50G 的 CDN 流量。当然,两家都只给已备案的网站提供服务。

两者其实都不错。本站选择了腾讯云 CDN,理由是免费的六个月 CDN 足够用,到期后再花钱购买也不算贵。按照流量消耗计算的话,腾讯云 CDN 的价格是 100G 流量/6 个月有效/20 元,平均 1G/0.2 元,挺便宜的。

回到正题。

加了 CDN 后,网站访问速度的确快了一些,但是我发现了两个问题。

1、字体图标显示错误。各种小图标都不能正常显示了,原本的图标位置变成了一个个小方框,看上去很不美观。

2、发表评论时,点击提交评论后,评论不加载。会让人以为评论失败,其实后台已经收到了评论,再次刷新才能显示。

 

这两个问题直观地影响到了访客的体验。那么如何解决这两个问题呢?

打开 F12 查看,发现字体文件遇到了跨域加载的问题。ttf、woff 等字体文件已经加载到 CDN 上,而 font 项目依然部署在本地服务器,因此字体图标跨域加载无法显示。

要解决也很简单。在腾讯云 CDN 的域名管理-高级配置中,有一个 HTTP Header 的配置选项。添加一个 Access-Control-Allow-Origin * 的配置,保存即可。

网站加了 CDN 后字体图标无法显示/评论提交后无法加载的解决办法

这样网站就能继续调用 CDN 中的字体文件,字体图标也能正常显示了。

经过以上配置之后,我意外地发现评论加载这个问题也一并解决了。应该是 comment-ajax.js 也能够被顺利调用,评论正常加载了。

 


VPS 日报 , 版权所有丨如未注明 , 均为原创丨
转载请注明原文链接:网站加了 CDN 后字体图标无法显示/评论提交后无法加载的解决办法
喜欢 (4)
VPS日报
关于作者:
VPS日报 | VPSRB.COM将日常为您更新最新主机优惠消息。欢迎收藏本站,并加入我们的QQ群:258195977,与志同道合的朋友们展开讨论和交流。
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址