CDN加速WordPress觸發CORS導致跨域加載失敗

這兩天折騰CDN加速來提升自己博客的訪問速度,用的阿里雲CDN加速方案;使用的時候發現一個問題,部分資源CDN加速失敗,原因是觸發了CORS,因爲CDN加速網址與博客網址不一致引發的跨域請求不成功;

CDN加速Wordpress觸發CORS導致跨域加載失敗

從報錯中發現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跨域加載報錯的問題就消失了;

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章