Font Awesome 的 icon 無法顯示，CORS Missing Allow Origin 問題

當引用不同網址的 Font Awesome icon 時
一些字型檔無法自動下載 ( ttf / woff / woff2)
瀏覽器出現警告：

CORS Missing Allow Origin

CORS = Cross-Origin Resource Sharing  跨來源資源共用
 

解決：

在 .htaccess 加上這段
或加到 apache httpd 的設定檔 httpd.conf 中

<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

這樣瀏覽器在瀏覽時，Server 回應的 header 中會多一項：
Access-Control-Allow-Origin: *


 

參考：

Font Awesome icons not showing in Chrome, a MaxCDN related Cross-Origin Resource Sharing policy issue

Font-Awesome has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

[教學] CORS 是什麼? 如何設定 CORS?

跨域請求  - nginx 設定方式


另外

在 A.com 網站要讀取 B.com 網站內容時：

例如 A.com 網站中的 jquery code
$.ajax({
   type: "GET",
   url: 'http://B.com/',
   data: {data: 1},
   success: function(jsondata){
     console.log(jsondata);
   },
   error: function(jsondata) {
   }
});

會出現的警告訊息

Chrome 的訊息：
Access to XMLHttpRequest at 'https://b.com/?xxid=1' from origin 'https://a.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Firefox 的訊息：
已封鎖跨來源請求: 同源政策不允許讀取 https://b.com/?xxid=1 的遠端資源。（原因: 缺少 CORS 'Access-Control-Allow-Origin' 檔頭）。狀態代碼: 200。

在 B.com 網站設定 header 即可，例如：
  Access-Control-Allow-Origin: https://a.com
  或是
  Access-Control-Allow-Origin: *