网站加了CDN后，字体图标报错Access-Control-Allow-Origin

这两天将自己做的网站(PM老猫)上线了，上线后发现因为之前购买的服务器带宽较小，第一次打开网站页面就会比较慢，想着给网站加了个CDN，让静态文件直接通过CDN访问。网上一找发现可以白嫖的CDN服务挺多的，想着之前服务器就是白嫖的腾讯云，于是CDN也直接想到了腾讯云CDN，开通服务绑定域名就直接赠送了半年每月20G的流量包。每月20G对于这种个人的小网站完全够用了。

没想到开通CDN遇到的第一个问题，就是网站图标全都显示不出来，查看页面信息访问CDN的图标文件报：has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is

于是百度了一下好多答案都差不，有给服务器iis添加HTTP响应标头的：

Access-Control-Allow-Headers：Content-Type, api_key, Authorization
Access-Control-Allow-Origin：*
Access-Control-Allow-Methods：OPTIONS,POST,GET
也有给静态页面加meta标签的：

<meta http-equiv="Access-Control-Allow-Origin" content="*" />

后面经过尝试发现我遇到的情况跟别人的有点不一样，错误信息提示访问CDN上的文件报错，那么问题应该是CDN服务器不允许跨域访问，那么就要从CDN上着手处理问题，而不是网站本身服务器。

最后在腾讯云CDN服务——域名管理——高级配置中添加HTTP响应头配置，添加上方的三条配置，问题解决。

经此发现，给自己的小网站加个CDN，提高访问速度其实操作挺简单的，

1、添加域名绑定，绑定之后需要解析个子域名，用子域名作为CDN的访问地址。比如源网站域名是www.mroldcat.top 就可以添加子域名如：tcdn.mroldcat.top

2、可把网址的的静态内容全部替换成用CDN的子域名访问。比如原网站上图片地址是http://www.mroldcat.top/upfile/Images/banner/202206/062405415860.png替换成cdn地址http://tcdn.mroldcat.top/upfile/Images/banner/202206/062405415860.png