HTTP 字體跨域問題

一、背景介紹

    最近在做公用菜單時，由於除了提供給子應用系統html代碼外還需要提供樣式、腳本。樣式中涉及到了字體。跨域的情況下，樣式腳本都可以正常訪問，但是字體訪問就會出現跨域問題了。

 

二、問題描述

    問：什么是字體跨域？

    答： 就是你所引用css樣式里，會用到一些自定義的字體，比如 “微軟雅黑”，“宋體”，當然這些都是微軟公開的，所受所有系統支持的，可正常顯示。還有一些是設計師設計出來的字體，會涉及到版權問題（當然這后面討論），當你用的時候回通過HTTP訪問這些字體，HTTP鏈接和你網站的鏈接，域名不一致，就出現這個問題 —— 字體跨域 

三、問題呈現

• 完全跨域

 

• 跨二級域

四、解決方案

• IIS 服務器（已驗證，可行）

 

        將以下內容配置到根目錄下的 web.config 文件，如果根目錄下沒有 web.config 文件，你只需要新建一個文件，命名為web.config 即可。

<?xml version="1.0" encoding="utf-8"?>
<configuration>
 <system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="*" />
     </customHeaders>
   </httpProtocol>
 </system.webServer>
</configuration>

 

想法來自： https://enable-cors.org/server_iis7.html

 

• Apache 服務器（待驗證）

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

 

• Nginx 服務器（待驗證）

server {
    ...
    # Fix @font-face cross-domain restriction in Firefox
    location ~* \.(ttf|ttc|otf|eot|woff|font.css)$ {
        add_header Access-Control-Allow-Origin "http://yoursite.com";
    }
    ...
}

 

想法來自： http://www.cnblogs.com/zzbo/p/3546737.html

 

由於樓主並沒有在本地配置 Nginx 以及Apache服務器，故只驗證了 IIS 服務器