nginx解決跨域請求

一.跨域出現原因
  跨域是指a頁面想獲取b頁面資源，如果a、b頁面的協議、域名、端口、子域名不同，或是a頁面為ip地址，b頁面為域名地址，所進行的訪問行動都是跨域的，而瀏覽器為了安全問題一般都限制了跨域訪問，也就是不允許跨域請求資源。

　　跨域問題的根本原因：因為瀏覽器收到同源策略的限制，當前域名的js只能讀取同域下的窗口屬性。什么叫做同源策略？就是不同的域名, 不同端口, 不同的協議不允許共享資源的，保障瀏覽器安全。同源策略是針對瀏覽器設置的門檻。

　　只有訪問類型為XHR（XMLHttpRequest)的才會出現跨域。XHR是基於XML的HTTP請求，XHR用於在后台與服務器交換數據。XHR是一個瀏覽器接口，使得Javascript可以進行HTTP(S)通信，ajax就是基於瀏覽器提供的XHR對象來實現的。ajax，可以實現異步的加載網頁也就是說可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。瀏覽器端發送的請求只有XHR 或 fetch 發出的才是 ajax 請求, 其它所有的都是非 ajax 請求，ajax 請求是一種特別的 http 請求。當瀏覽器端接收到ajax 請求,瀏覽器不會對界面進行任何更新操作, 只是調用監視的回調函數並傳入響應相關數據。

二.跨域的解決策略

　　CORS是跨源資源分享（Cross-Origin Resource Sharing）的縮寫。它是W3C標准，是跨源AJAX請求的根本解決方法。相比JSONP只能發GET請求，CORS允許任何類型的請求。CORS為Web服務器定義了一種方式，允許網頁從不同的域訪問其資源。而這種訪問是被同源策略所禁止的。CORS系統定義了一種瀏覽器和服務器交互的方式來確定是否允許跨域請求。 CORS實現了AJAX可控的跨域訪問。

　　在nginx中添加跨域配置，可以添加在server字段，應用於整個server，也可以添加在server:location字段下,應用於單個location。nginx配置文件通過使用add_header指令來設置響應頭response header。當前層級無 add_header 指令時，則繼承上一層級的add_header。相反的若當前層級有了add_header，就無法繼承上一層的add_header。

　　 　　　　　　　　

　　　　 # 指定允許的請求域名端口訪問我們的跨域資源，*代表所有的域，也可設置具體方法
　　　　 #　add_header Access-Control-Allow-Origin *;
　　　　 #當帶cookie訪問時不能用*，帶cookie的請求不支持*號。$http_origin表示動態獲取請求客戶端請求的域。
　　　　　add_header Access-Control-Allow-Origin $http_origin;　

　　　　 # 帶cookie請求需要加上這個字段，並設置為true
　　　　 add_header Access-Control-Allow-Credentials true;

   
　　　　 # 指定允許跨域的方法，*代表所有方法，$http_access_control_request_method指動態獲取，也可設置具體方法。
　　　　 # add_header Access-Control-Allow-Methods $http_access_control_request_method;
　　　　 #如設置GET,POST,OPTIONS三種方法
        add header Access-Control-Allow-Methods 'GET, POST, OPTIOS';
　　

　　　　 # 表示請求頭的字段,*表示所有字段
　　　　 #add_header Access-Control-Allow-Headers *;
　　　　 #動態獲取
　　　　 add_header Access-Control-Allow-Headers $http_access_control_request_headers;

　　　　 # 預檢命令的緩存，如果不緩存每次會發送兩次請求 
　　　　 add_header Access-Control-Max-Age 3600; 
　　　　
 　　　　
　　　　 # OPTIONS預檢命令，預檢命令通過時才發送請求 
　　　　 # 檢查請求的類型是不是預檢命令 
　　　　 if ($request_method = OPTIONS){
　　　　　　 return 200; 
　　　　}