前端解決跨域

在平常的項目開發時會不可避免的須要進行跨域操做，面試中也是頻繁被常常會問到的問題，本文只是我常常用到的解決跨域的方式作個記錄與總結。

全部支持Javascript的 瀏覽器 都會使用‘同源策略’這個安全策略，所謂同源是指，域名，協議，端口相同，就是由於同源策略的影響致使無法直接用XMLHttpRequest請求不一樣域上的數據，因此各類解決問題的技術出現了。

Jsonp

<script> 標籤元素是不受同源策略影響，OK，利用這一個漏洞，能夠實現加載不一樣域服務器上的腳本啦。該協議的一個要點就是容許用戶傳遞一個callback參數給服務端，而後服務端返回數據時會將這個callback參數做爲函數名來包裹住JSON數據，這樣客戶端就能夠隨意定製本身的函數來自動處理返回數據了。
以jquery封裝的$.getJson()爲例：

<script type="text/javascript">
    $.ajax({
             type: "get",
             url: "http://www.test.com?name='test'",
             dataType: "jsonp", 
             jsonpCallback:"callbackFun",//自定義的jsonp回調函數名稱，默認爲jQuery自動生成的隨機函數名，也能夠寫"?"，jQuery會自動爲你處理數據
             success: function(json){
                 alert('success');
             },
             error: function(){
                 alert('fail');
             }
         });
     });
</script>

經過dataType指定jsonp,jquery底層封裝後，會在head標籤後面追加<script src="http://www.test.com?name='test'&callback=callbackFun"></script>

全部的jsonP都是這個原理，藉助script標籤的跨域特性來實現，callbackFun再jquery中是自動生成的，後臺會獲取jsoncallback參數，獲取對應的函數名稱，最後包裝成想要的格式，好比最後輸出結果是：callbackFun({"result":"suc","code":"1000"})，那麼再Jquery中，會將該方法直接指定給success方法，最後來接收返回的數據。

JSONP的優勢是：它不像XMLHttpRequest對象實現的Ajax請求那樣受到同源策略的限制；它的兼容性更好，在更加古老的瀏覽器中均可以運行，不須要XMLHttpRequest或ActiveX的支持；而且在請求完畢後能夠經過調用callback的方式回傳結果。
JSONP的缺點則是：它只支持GET請求而不支持POST等其它類型的HTTP請求；它只支持跨域HTTP請求這種狀況，不能解決不一樣域的兩個頁面之間如何進行JavaScript調用的問題。

cors

CROS（Cross-Origin Resource Sharing）跨域資源共享，定義了必須在訪問跨域資源時，瀏覽器與服務器應該如何溝通。CROS背後的基本思想就是使用自定義的HTTP頭部讓瀏覽器與服務器進行溝通，從而決定請求或響應是應該成功仍是失敗。CORS須要瀏覽器和服務器同時支持。目前，全部瀏覽器都支持該功能，IE瀏覽器不能低於IE10。
前端實現方式和通常的ajax請求是同樣的，只是方式的接口是絕對地址。服務器端對於CORS的支持，主要就是經過設置Access-Control-Allow-Origin來進行的。若是瀏覽器檢測到相應的設置，就能夠容許Ajax進行跨域的訪問。

JSONP只支持GET請求，CORS支持全部類型的HTTP請求。JSONP的優點在於支持老式瀏覽器，以及能夠向不支持CORS的網站請求數據。

服務器代理

禁止跨域問題實際上是瀏覽器的一種安全行爲，假如咱們的目標服務器不能設置header,並且咱們須要發送post請求，上面的解決方案就被否認了，可是服務器與服務器之間的請求是不存在跨域的。

強大的nginx，偉大的nodeJS均可以實現一個代理服務器功能。

反向代理服務器，就是把http請求轉發到另外一個或者一些服務器上。經過把本地一個url前綴映射到要跨域訪問的web服務器上，就能夠實現跨域訪問。對於瀏覽器來講，訪問的就是同源服務器上的一個url。而nginx經過檢測url前綴，把http請求轉發到後面真實的物理服務器。並經過rewrite命令把前綴再去掉。這樣真實的服務器就能夠正確處理請求，而且並不知道這個請求是來自代理服務器的。

nginx的配置方法網上已經氾濫了，保存幾個參考過的網址。
http://www.imooc.com/article/...
http://www.cnblogs.com/renjin...
http://www.cnblogs.com/bninp/...

nodeJs 主要是使用的node-http-proxy實現的，相關信息也不少。
https://github.com/nodejitsu/...
http://www.cnblogs.com/woodk/...
http://blog.csdn.net/jaye100/...