CDN中，字體文件的跨域問題和解決

@font-face是CSS3中的一個特性，可以把自己定義的Web字體嵌入到網頁中，隨着@font-face，越來越多的網頁采用字體圖標作為網頁中的小圖形。

比如Bootstrap就采用了Glyphicons 字體圖標 在Bootstrap的架構下可以免費使用Glyphicons的250多種圖標字體。另外一個比較常用的開源圖標字體就是Font Awesome了，內含幾百種各種size的圖標文件，可以很容易實現Fixed Width，Animated Icons，Rotated，Flipped，Stacked等特性，跟能和Bootstrap無縫配合。悅合同就是使用Font Awesome作為字體圖標。

當在配置CDN的時候，duang~~~

字體跨域！！！！！！

由於網站的資源文件使用的是另外的域名（這樣做是便於瀏覽器在加載時可以提高加載效率，關於domain hash也就是多域名來加速訪問的問題有空再說），這樣主域名和資源的域名尤其是字體文件，就形成跨域訪問，在主域名的網站無法加載資源域名中的字體。

處理這種跨域，只要設置Access-Control-Allow-Origin，允許目標域名訪問就可以了，Access-Control-Allow-Origin是HTML5新增的一個特性，在資源類的域名下做如下配置（nginx的配置，apache相似處理）​

location ~ .*\.(eot|ttf|ttc|otf|eot|woff|woff2|svg)(.*) {

    add_header Access-Control-Allow-Origin http://www.yourdomain.com;

}

 

配置完后，例牌reload配置，刷新CDN緩存，就ok了。

這里說多一句，CDN會緩存當時的Response Header的，每次修改必須刷新CDN緩存，不然瀏覽器刷死也不會生效。​

 

 

CDN配置cors允許跨域訪問時注意事項：

1.     目前不支持泛域名添加，如*.12345.com，僅支持域名精確匹配。

2.     目前僅支持配置一條白名單域名。

3.     若使用OSS產品作為源站，OSS與CDN平台同時配置Cors，CDN的配置將覆蓋OSS。

4.     若源站為自己的服務器或ECS產品，建議先進行動靜分離，靜態文件使用CDN加速，CDN控制台配置的Cors功能，僅對靜態文件生效。

 

 

Header set Access-Control-Allow-Origin "*"
# nginx config
if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){
    add_header Access-Control-Allow-Origin *;
}