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

年初本站发表了一篇文章：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 * 的配置，保存即可。