前端資源服務跨域問題之nginx篇

問題描述

一、首先讓咱們先看一張圖

二、從圖中，咱們能夠很清楚的看到當http請求的站點訪問https的資源的時候會報出「Cross-Origin」跨域的問題。爲何會出現這樣的錯誤，這是由於涉及到「同源策略」的問題。。。blablabla……

三、下面依次說如何解決這個問題

 

問題解決

一、咱們再來看一下報錯信息，報錯信息中有一段寫明「Access-Control-Allow-Origin」header的字樣，咱們能夠由此看出會不會在服務端add header便可呢？

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

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

      如圖所示：

 

三、重啓以後，其餘內容好了（例如，css文件等）發現字體（font）文件仍是有問題的，如圖所示：

 

 

 

 

這是爲何……！字體文件的Context-Type倒是」text/html"！！！並且尚未像別的東東那樣的  Access-Control-Allow-Origin:*

 

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

五、以爲這樣萬事大吉 就錯了、錯了、錯了……重要的事情說三遍（這個地方是個巨坑、當時就是在下面要說的地方浪費了好長時間，不過最後仍是解決了，不墨跡了，咱們繼續……）

 

 

六、忽然發現，哦，是否是由於我沒加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】

七、再次重啓，再看！

Oh，My God  仍是如此。。。

 

八、拿出殺手鐗，查詢log吧。

果真發現一個致命問題

 

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

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

好吧……我錯了。

 

九、因而乎，我在「location ~"也加一個root好了：）

十、「最後」一次重啓，測試、搞定！如圖所示：

後記

一、以前看安全測試的書籍中瞭解到了「同源策略」，今天是見識並實踐了一下跨域問題的解決。漲姿式了！受益不淺！

二、其實最後那個配置文件，能夠修改成（如圖所示），我姑且認爲能夠設置一個root全局變量，嘿嘿。

三、仍是得繼續學習、鑽研呀……fighting。

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

五、遇到問題及時查log很是重要、很是重要、很是重要……