使用cdn以后 woff等字体文件文件无法访问的问题

最近在配置自己这个网站的时候遇到各种神级的问题,下面就列举一个遇到的cdn的问题。
自己这个网站使用的是七牛cdn,css样式等静态资源使用回源cdn的形式配置着。其中cdn的域名使用的cdn.moheqionglin.com,当时为了防止别人倒链,就开启了cdn的防倒链选项,但是遇到了css在加载font字体跨域禁止访问问题。

如上图所示, origin 显示的域名是 www.moheqionglin.com 但是font字体文件因为是从cnd上下载的,所以ref是 cdn.moheqionglin.com 因此出现了 CROS跨域访问资源的问题,关于跨域访问原理可以上网查找资料。

解决方法

解决方法很简单,就是在cdn上增加 跨域访问的header 就行了,

AWS Cloud Frontend 解决方案

在Edit Behavior 中增加一个 header的白名单,白名单如下


 Access-Control-Allow-Origin:*

 accept:*/*

cloud frontend 解决跨域访问问题

七牛cdn 解决方案

但是我在七牛cdn上 找了个遍都没有找到增加 header的地方。最后无奈只能给 七牛cdn提交工单解决这个问题。原来七牛cdn只能在后台增加这个白名单限值,不支持前台界面操作。七牛员工在后台帮我增加如下代码以后,网站终于访问正常了没有 CROS问题了。

  Access-Control-Allow-Origin:*

  accept:*/*

七牛的工单Font字体CROS跨域访问 七牛工单地址

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
慷慨打赏