关于跨域资源共享和浏览器同源策略

偶然发现博客打开的时候一部分 logo 在 chrome 下会不加载,而那部分 logo 是特殊字体的形式。

F12发现:Font from origin xxxxxxx has been blocked from loading by Cross-Origin Resource Sharing policy

fuckaliyuncdn

为什么感觉每个字都认识但是连起来就不认识了呢

询问老司机,是 CORS 策略限制(Safari 似乎没这个策略),报错的意思是 http://www.starduster.me 跨域到 https://www.starduster.me 而 https://www.starduster.me没有提供相应的 Access-Control-Allow-Origin header,即使是同一域名不同协议也算跨域。

实际上这应该是 CDN 的锅,我设置的 301 跳转到 HTTPS 在加 CDN 之后就失效了,造成了 HTTP 可以直接访问,在 HTTP 也没加载 HTTPS 资源

处理方式有加上 Header(比如 Google fonts 就有Access-Control-Allow-Origin header:*)或者修改引用 https:// 为 //(根据当前页面的协议自动选择 http 还是 https)

googlefontscors

在阿里云的 CDN 设置里加上这个 Header 就没这个报错了。

Posted in

发表评论

电子邮件地址不会被公开。 必填项已用*标注