legend3---阿里雲oss無法加載font-awesome字體

一、總結

一句話總結：

跨域和防盜鏈：先設置字體文件跨域，再要小心字體文件是css的相對引用，所以具體調用字體文件的時候referer是服務器，是css在調用，所以防盜鏈白名單里面要加上 本oss，而且報的403錯誤，一下子就應該想到防盜鏈

 

 

 

 

二、阿里雲oss無法加載font-awesome字體

轉自或參考：

 

        前段時間上線一個項目，將css,js等靜態資源做了cdn部署，結果發現我的font awesome圖標通通不能正常顯示。后來查了資料發現是由於font-face引用字體跨域導致的。 我的主域名www.domain.com ,   CDN資源域名 cdn.domain.com;

1、背景知識----http的訪問控制（CORS）：

        當一個資源從與該資源本身所在的服務器不同的域或端口請求一個資源時，資源會發起一個跨域 HTTP 請求。

        比如，站點 http://domain-a.com 的某 HTML 頁面通過 <img> 的 src 請求 http://domain-b.com/image.jpg。網絡上的許多頁面都會加載來自不同域的CSS樣式表，圖像和腳本等資源。
        出於安全原因，瀏覽器限制從腳本內發起的跨源HTTP請求。 例如，XMLHttpRequest和Fetch API遵循同源策略。 這意味着使用這些API的Web應用程序只能從加載應用程序的同一個域請求HTTP資源，除非使用CORS頭文件。

        跨域資源共享（ CORS ）機制允許 Web 應用服務器進行跨域訪問控制，從而使跨域數據傳輸得以安全進行。瀏覽器支持在 API 容器中（例如 XMLHttpRequest 或 Fetch ）使用 CORS，以降低跨域 HTTP 請求所帶來的風險。

        跨域資源共享標准新增了一組 HTTP 首部字段，允許服務器聲明哪些源站有權限訪問哪些資源。怎么聲明，見解決方案。

      詳細請看原文：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

2、本案分析

font-awesome.css 的代碼如下：

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.6.3');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
可以看到，我們在此文件中對字體的引用就屬於從腳本內發起的跨源HTTP請求，這是不被瀏覽器所允許的。

3、解決方案：

      跨域資源共享標准新增了一組 HTTP 首部字段，允許服務器聲明哪些源站有權限訪問哪些資源。那本例來說，我們的資源服務器是 cdn.domain.com, 我們就要在這個服務器上聲明我的資源允許被哪些源站訪問。下面以Aapache為列，看看如何聲明：

在apache 的.hatccess中做如下設置

<FilesMatch ".(eot|ttf|otf|woff)">
Header set Access-Control-Allow-Origin "*"  #表示允許所有的源來訪問資源，也可已指定為具體的域名,如 www.domain.com

Header set Access-Control-Allow-Methods "*"  #允許請求的方法 GET POST等

由於本案中使用的是阿里雲的cdn服務器，無法按上述方法配置，好在阿里也給出了配置方法，見：

https://help.aliyun.com/knowledge_detail/40183.html