CDN加速WordPress触发CORS导致跨域加载失败

阅读更多

这两天折腾CDN加速来提升自己博客的访问速度，用的阿里云CDN加速方案；使用的时候发现一个问题，部分资源CDN加速失败,原因是触发了CORS，因为CDN加速网址与博客网址不一致引发的跨域请求不成功；

从报错中发现Off与Tff字体加载报错：

(index):1 Access to Font at 'http://cdn.5yun.org/wp-content/themes/yusi1.0/fonts/fontawesome-webfont.woff?v=4.1.0' from origin 'http://www.5yun.org' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.5yun.org' is therefore not allowed access.

既然报错，那就先了解一下CORS的原理：

CORS定义一种跨域访问的机制，可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单，只需由服务器发送一个响应标头即可。

WordPress触发CORS导致跨域加载失败的解决办法：

目前我用的是lnmp控制面板，对应站点的nginx配置文件在/usr/local/nginx/conf/vhost目录下

编辑www.5yun.org.conf当前站点配置文件，在合适位置加入以下代码

        location ~* \.(ttf|woff)$ {
       add_header Access-Control-Allow-Origin *;
        }

配置保存完毕后，需要重启nginx服务器才能生效

/etc/init.d/nginx restart

然后ctrl+f5强制刷新一下，ttf与woff跨域加载报错的问题就消失了；