若谷学院
互联网公司技术架构分享

访问七牛CDN的字体文件报错的解决方案: Access to…has been blocked by CORS policy

访问七牛CDN上的字体文件报错,提示访问被CORS政策阻止,错误信息如下:
Access to Font at ‘https://cdn.ruoguschool.com/wp-content/themes/dux/fonts/fontawesome-webfont.woff?v=4.2.0’ from origin ‘https://www.ruoguschool.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
 
原因
由于跨域请求违反了CORS政策的原因。也跟七牛的服务有关,像是一个bug,经过测试不带版本号的URL可以正常访问,带有版本号的不能正常访问。
 
背景
由于安全的原因,HTTP资源只允许来自同一个域名的访问。比如在脚本中发起的XMLHttpRequest遵循这个原则。W3C Web标准推荐使用CORS协议用来作跨域请求的访问控制。在各个Web服务器,云服务的供应商中CORS广为使用。关于CORS 参考:HTTP access control (CORS) – HTTP | MDN
 
问题排查
可以使用curl向URL发起响应头请求,获取Response Header,检查其中是否包含有access-control-allow-origin一行,没有的话说明CDN服务器,或者Web服务器不允许对这个URL的跨域请求。也可以测试一下请求不带版本号的文件返回的header是否一样的,浏览器访问报错时,返回的响应头中时没有access-control-allow-origin的。
$ curl -I -s -X GET -H “Origin: www.ruoguschool.com” https://cdn.ruoguschool.com/wp-content/themes/dux/fonts/fontawesome-webfont.woff\?v\=4.2.0
 
解决方案
最终按照如下三步操作,解决了这个问题。
1.七牛CDN配置中启用Referral防盗链(默认没有启用),把网站域名加到白名单中。
 
2.服务器端配置,在HTTP Header中加上 Access Control Allow Origin,nginx作为服务器时这样配置:
add_headerAccess-Control-Allow-Origin *;
add_headerAccess-Control-Allow-Headers X-Requested-With;
add_headerAccess-Control-Allow-Methods GET,POST,OPTIONS;
将这段代码添加到 http{} 或者静态资源对应的 server{} 中。如果只允许自己的网站的域名使用CDN,可以将第一行代码的星号改为自己的域名,例如 *.ruoguschool.com
 
3.测试是否可以正常访问:
$ curl -I -s -X GET -H “Origin: www.ruoguschool.com” https://cdn.ruoguschool.com/wp-content/themes/dux/fonts/fontawesome-webfont.woff\?v\=4.2.0
$ curl -I -s -X GET -H “Origin: www.ruoguschool.com” https://cdn.ruoguschool.com/wp-content/themes/dux/fonts/fontawesome-webfont.woff
 
看这连个命令的输出结果中有没有这一行:
access-control-allow-origin: *
如图中红色部分,有了就可以正常加载字体文件了。
 
如果仍然没有这一行,在七牛CDN的”刷新预取”里面,刷新字体文件的URL,比如我的是:
https://cdn.ruoguschool.com/wp-content/themes/dux/fonts/fontawesome-webfont.woff
https://cdn.ruoguschool.com/wp-content/themes/dux/fonts/fontawesome-webfont.woff?v=4.2.0
 
 
结论
七牛CDN里面,使用自己的服务器(没使用七牛云存储)作为源站时,Referral防盗链是必须配置的。否则带有版本号的文件路径跨域访问会出错。而CDN的使用实际上都是跨域的。 因此需要配置防盗链,并且把需要使用CDN的域名加到白名单中。
好烂呀没啥价值凑合看看还不错很精彩 (1 人评了分, 平均分: 3.00 )
Loading...
本站文章来自互联网一线技术博客,若有侵权,请联系我们:若谷技术学院 » 访问七牛CDN的字体文件报错的解决方案: Access to…has been blocked by CORS policy
关注若谷技术,获得个性化即时架构文章推送

评论 抢沙发

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

全球互联网技术架构,前沿架构参考

联系我们博客/网站内容提交