Access-Control-Allow-Origin策略解决CDN资源字体库失效解决办法

今天给博客做静态资源加速的时候发现,以往正常显示的font图标全部失效,起初以为是css的问题或者那里配置错了,排除了半天也没找到问题所在,问题一直困扰着,无意中检查元素的时候发下了问题。

access-control-allow-origin

Font from origin 'https://static.liujihong.cn' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.liujihong.com' is therefore not allowed access.

这里我给静态资源设置的域名是https://static.liujihong.cn,而网站使用的域名是https://liujihong.com,属于两个域名,https://static.liujihong.cn阻止了https://liujihong.com的请求。

在网上查询了一下(请参考:https://www.w3.org/TR/cors/#access-control-allow-methods-response-header),可能是我自己服务器配置问题,我服务器环境是nginx,按照说明在nginx.conf里面添加了一下字段

<!--解决字体库跨域问题->
http {
......
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
...... }

本以为问题就这么解决了,但是网站字体库加载还是报错,又开始犯愁了,回过头在看,问题出现在https://static.liujihong.cn上面,是这个域名下面的资源不允许跨域,而我使用的是阿里云的CDN,在自己服务器上面下手脚显然是无济于事的,于是我进阿里云后台,在CDN管理-设置http头里面添加了http头,问题完美解决了。(其实只需要添加这一条就可以了,为了安全起见,GET,POST,OPTIONS允许这三种方式跨域请求)

Access-Control-Allow-Origin: *   //   *允许所有域名请求,也可以单独设置成自己的域名,防止别人盗链,也比较安全。
Access-Control-Allow-Methods :GET,POST,OPTIONS    //允许GET,POST,OPTIONS三种方式跨域请求

add-access-control-allow-origin

add-access-control-allow-origin-2

总结:

  1. 如果是自己配置的资源服务器,环境是nginx。只要在nginx.conf里面添加本文中提到的三个字段即可。
  2. 如果用的是第三方CDN,一般都会允许添加http头的,只要在相应参数里面设置即可。

 

 

  • 用支付宝打我

男、80后、简单最好。

发表评论

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