問題描述

1、首先讓我們先看一張圖

2、從圖中，我們可以很清楚的看到當http請求的站點訪問https的資源的時候會報出“Cross-Origin”跨域的問題。為什麼會出現這樣的錯誤，這是因為涉及到“同源策略”的問題。。。blablabla……

3、下麵依次說如何解決這個問題

問題解決

1、我們再來看一下報錯信息，報錯信息中有一段寫明“Access-Control-Allow-Origin”header的字樣，我們可以由此看出會不會在服務端add header即可呢？

2、順著這個思路，在nginx配置中加入了這樣一句：

      add_header 'Access-Control-Allow-Origin' '*';

      如圖所示：

3、重啟之後，其他內容好了（例如，css文件等）發現字體（font）文件還是有問題的，如圖所示：

這是為什麼……！字體文件的Context-Type卻是”text/html"！！！而且還沒有像別的東東那樣的  Access-Control-Allow-Origin:*

4、於是乎，繼續增加了這樣一句（如圖所示），指定eot、ttf、woff字體文件 強制加入header信息

5、覺得這樣萬事大吉 就錯了、錯了、錯了……重要的事情說三遍（這個地方是個巨坑、當時就是在下麵要說的地方浪費了好長時間，不過最後還是解決了，不墨跡了，我們繼續……）

6、突然發現，哦，是不是因為我沒加mime.types呢？（這個必須要加的，因為它決定文件的Content-Type）這個應該早點想起來的……blablabla…… 趕緊加上 回來再看……

於是乎加了三行：

application/x-font-woff woff woff2; 
font/ttf ttf; 
font/opentype otf;

【要刪除 application/font-woff     woff;  這行刪掉(mime.types 第27行） 否則會報duplicate的warning】

7、再次重啟，再看！

Oh，My God  還是如此。。。

8、拿出殺手鐧，查詢log吧。

果然發現一個致命問題

哥，為啥你要去$NGINX_HOME/html目錄去找啊，你不應該是從/www/xinghuo-img去找嗎？(⊙o⊙)…

（旁白：誰告訴你 "location /" 和“location ~"會共用他們其中一個的root了。。。。

好吧……我錯了。

9、於是乎，我在“location ~"也加一個root好了：）

10、“最後”一次重啟，測試、搞定！如圖所示：

後記

1、之前看安全測試的書籍中瞭解到了“同源策略”，今天是見識並實踐了一下跨域問題的解決。漲姿勢了！受益匪淺！

2、其實最後那個配置文件，可以修改為（如圖所示），我姑且認為可以設置一個root全局變數，嘿嘿。

3、還是得繼續學習、鑽研呀……fighting。

4、它折磨我從兩點到四點……還好順利解決了。記錄下來以便大家以後不用再次踩坑，謝謝！blablabla……

5、遇到問題及時查log非常重要、非常重要、非常重要……