最近閑來無事做個個人網站耍，部署到服務器的時候發現有個字體文件老是下載不下來，瀏覽器老是報不允許跨域請求。
跨域是指a頁面想獲取b頁面資源，如果a、b頁面的協議、域名、端口、子域名不同，或是a頁面為ip地址，b頁面為域名地址，所進行的訪問行動都是跨域的，而瀏覽器為了安全問題一般都限制了跨域訪問，也就是不允許跨域請求資源。 跨域情況如下：
| url | 說明 | 是否跨域 |
|---|---|---|
| http://www.CUOXin.com/a.jshttp://www.a.com/b.js | 不同域名 | 是 |
| http://www.a.com/lab/a.jshttp://www.a.com/script/b.js | 同一域名，不同文件夾 | 否 |
| http://www.a.com:8000/a.jshttp://www.a.com/b.js | 同一域名，不同端口 | 是 |
| http://www.a.com/a.jshttps://www.a.com/b.js | 同一域名，不同協議 | 是 |
| http://www.a.com/a.jshttp://70.32.92.74/b.js | 域名和域名對應IP | 是 |
| http://www.a.com/a.jshttp://script.a.com/b.js | 主域相同，子域不同 | 是（cookie不可訪問） |
| http://www.a.com/a.jshttp://a.com/b.js | 同一域名，不同二級域名（同上） | 是 |
目前來講沒有不依靠服務器端來跨域請求資源的技術
jsonp 需要目標服務器配合一個callback函數。window.name+iframe 需要目標服務器響應window.name。window.location.hash+iframe 同樣需要目標服務器作處理。html5的 postMessage+ifrme 這個也是需要目標服務器或者說是目標頁面寫一個postMessage，主要側重于前端通訊。CORS 需要服務器設置header ：access-Control-Allow-Origin。nginx反向代理 這個方法一般很少有人提及，但是他可以不用目標服務器配合，不過需要你搭建一個中轉nginx服務器，用于轉發請求。寫了一個博客系統玩，自己的服務器，采用Nginx代理轉發請求到tomcat。 部署完項目后瀏覽器里面訪問，發現有幾個圖標出不來，經檢測是字體文件被瀏覽器認為是跨越請求，沒有被加載。該字體文件不是由頁面直接引用，而是通過一個CSS文件加載的，該css加載無問題。字體文件和css文件都在工程目錄下，理應不會出現跨域請求的情況。 在火狐瀏覽器里面打開網絡請求查看器，點開請求結果為0字節的字體請求連接，結果如下： 
這個字體文件是通過字體css依賴加載的，并不是通過頁面直接引用。 發現請求頭Host是 itclj.com 而Origin是http://www.itclj.com。 響應Server是由Nginx報出來的，進過定位，應該是Nginx認為，源主機是www.itclj.com，目標主機是itclj.com不來自同一個域，所以被認為是非法請求。
Nginx配置如下： 
在瀏覽器里面請求www.itclj.com的時候Nginx會自動解析為服務名itclj.com，代理轉發后請求變為了http://itclj.com，通過代理的文件來發起請求的主機就變成了itclj.com，瀏覽器里面實際的主機是www.itclj.com所以，所以被Nginx認為是跨域請求了。 修改Nginx為如下配置即可。
修改配置重啟Nginx即解決問題。
新聞熱點
疑難解答
