跨域解決辦法Jsonp & Cors

跨域緣由：

web中存在跨域是因爲瀏覽器採用同源安全策略，形成的跨域問題。

同源策略 :

是指在不一樣的請求（http/https)、域名 （www.baidu.com/www.alibaba.com）、端口（80/8080）

解決辦法

JSONP:

json實現原理是採用相似圖片src跨域請求資源的方式完成數據的請求，經過js動態生成的

< script src="js-path.js?callBack=function(){alert(args)}" /> 
複製代碼

編程技巧實現，非官方協議。服務端接收到請求後，會把參數回傳回來，便可當即執行該js 的callBack回調函數。Jquery也是按照該原理實現了封裝，所以有了jquery 版本的ajax jsonp請求。

Jsonp&Json區別

Jsonp和json沒有直接的聯繫，jsonp是一種非官方協議，json是一種方便傳遞的文本數據格式。

CORS:

CORS須要瀏覽器和服務器同時支持。目前，全部瀏覽器都支持該功能，IE瀏覽器不能低於IE10。 整個CORS通訊過程，都是瀏覽器自動完成，不須要用戶參與。對於開發者來講，CORS通訊與同源的AJAX通訊沒有差異，代碼徹底同樣。瀏覽器一旦發現AJAX請求跨源，就會自動添加一些附加的頭信息，有時還會多出一次附加的請求，但用戶不會有感受。所以，實現CORS通訊的關鍵是服務器。只要服務器實現了CORS接口，就能夠跨源通訊，cors分爲簡單請求和非簡單請求。

簡單請求

（1) 請求方法是如下三種方法之一： HEAD GET POST （2）HTTP的頭信息不超出如下幾種字段： Accept Accept-Language Content-Language Last-Event-ID Content-Type：只限於三個值application/x-www-form-urlencoded、multipart/form-data、text/plain 凡是不一樣時知足上面兩個條件，就屬於非簡單請求。 瀏覽器發現此次跨源AJAX請求是簡單請求，就會自動在頭信息之中，添加一個Origin字段， 上面的頭信息中，Origin字段用來講明，本次請求來自哪一個源（協議 + 域名 + 端口）。服務器根據這個值，決定是否贊成此次請求。若是Origin指定的源，不在許可範圍內，服務器會返回一個正常的HTTP迴應。瀏覽器發現，這個迴應的頭信息沒有包含Access-Control-Allow-Origin字段，就知道出錯了，從而拋出一個錯誤，被XMLHttpRequest的onerror回調函數捕獲（這種錯誤沒法經過狀態碼識別，由於HTTP迴應的狀態碼有多是200）。若是Origin指定的域名在許可範圍內，服務器返回的響應，會多出幾個頭信息字段。

Access-Control-Allow-Origin:容許的域名
Access-Control-Allow-Credentials:是否包括Cookie信息/boolean類型 
Access-Control-Expose-Headers: 可選字段值
Content-Type: text/html; charset=utf-8
複製代碼

非簡單請求

非簡單請求是那種對服務器有特殊要求的請求，好比請求方法是PUT或DELETE，或者Content-Type字段的類型是application/json。非簡單請求的CORS請求，會在正式通訊以前，增長一次HTTP查詢請求，稱爲"預檢"請求（preflight）。"預檢"請求用的請求方法是OPTIONS，表示這個請求是用來詢問的。 若是瀏覽器否認了"預檢"請求，會返回一個正常的HTTP迴應，可是沒有任何CORS相關的頭信息字段。這時，瀏覽器就會認定，服務器不一樣意預檢請求，所以觸發一個錯誤，被XMLHttpRequest對象的onerror回調函數捕獲。 一旦服務器經過了"預檢"請求，之後每次瀏覽器正常的CORS請求，就都跟簡單請求同樣，會有一個Origin頭信息字段。服務器的迴應，也都會有一個Access-Control-Allow-Origin頭信息字段。

CORS&JSONP

同：CORS與JSONP都是爲了跨域資源請求，可是CORS比JSONP更強大。 區別：JSONP只支持GET請求，CORS支持全部類型的HTTP請求。JSONP的優點在於支持老式瀏覽器，以及能夠向不支持CORS的網站請求數據。