什麼是跨域？跨域有幾種實現形式？
- jacklove原創
- 2018-05-21 15:56:232159瀏覽
跨域在js中會經常遇見，本篇將會對其進行相關的講解。
同源策略是個很好的安全機制，但是有時候我們需要從不同的域下獲取資料或進行交互，而這個時候同源策略會造成阻礙。
跨域，就是為了實現不同來源下資料資訊傳輸與互動。
實作跨域有以下幾種方式：
1.JSONP
JSONP是JSON with padding（參數式JSON）的簡寫，是JSON的一種新應用方式。
JSONP的實現，依靠動態的3f1c4e4b6b16bbbd69b2ee476dc4f83a元素來使用，因為3f1c4e4b6b16bbbd69b2ee476dc4f83a不受同源策略限制，有能力從其他域中加載資源，示例：
透過3f1c4e4b6b16bbbd69b2ee476dc4f83a請求傳回一個JSONP
<script src=""http://freegeoip.net/json/?callback=handleResponse></script>
傳回的JSONP由兩個部分組成：回呼函數和JSON資料
handleResponse(JSON)
#因為透過3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤請求的資料會被當作js程式碼執行，因此回呼函數會對JSON資料進行處理，在這個範例裡，回呼函數就是handleResponse。通常回呼函數名稱會以參數的方式寫入請求url中，且在本地定義好回呼函數。
缺點：JSONP是從其他網域載入程式碼執行，如果其他網域不安全，則回應中很可能會夾帶一些惡意程式碼，此時除了放棄使用JSONP外，沒有辦法追究，因此要確保資料來源的安全。
2.CORS
CORS（Cross-Origin Resource sharing，跨網域資源共用）是Ajax跨網域請求的一種方式，定義了在必須存取跨網域資源時，瀏覽器與伺服器應該如何進行溝通。
CORS背後的基本思想，就是使用定義的HTTP頭部讓瀏覽器與伺服器溝通，從而決定請求或回應是否應該成功。
CORS分為簡單請求和複雜請求
同時滿足下面兩個條件的為簡單請求：
1.請求方式為get、post、head三者中的一種；
2.請求頭資訊不超出這幾種欄位：Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type只限於三個值application/x-www-form-urlencoded、multipart/form-data、 text/plain
簡單請求範例：
在我們跨網域發送簡單請求時，會定義一個Origin頭部，說明請求來源
Oring:http://www.baidu.com //說明這一請求是http://www.baidu.com發出的
如果伺服器認為這個請求可以接受，就在Access-Control-Allow-Origin頭部中傳回相同的來源資訊（假設為公共資源，則可以傳回「*」）
Access-Control-Allow-Origin:http://www.baidu.com
如果沒有這個頭部，或頭部的來源資訊不匹配，瀏覽器就會攔截掉回傳的回應。
除了簡單請求外，都是複雜請求
複雜請求與簡單請求類似，只是在發送正式請求之前，會先發送一個預檢請求，確認當前域是否在伺服器許可範圍中，伺服器可以接受什麼HTTP頭資訊、請求方式、資料類型等。得到許可回覆以後，才會開始正式通信。
下面是預檢請求頭和回應頭
//這是一個預檢請求頭OPTIONS /cors HTTP/1.1 //注意請求返回為options；Origin: https://api.qiutc .me //請求來源；Access-Control-Request-Method: PUT // 請求的方式Access-Control-Request-Headers: X-Custom-Header //請求頭額外資訊；Host: api.qiutc.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
//這是一個預檢回應頭HTTP/1.1 200 OKDate: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: https://api.qiutc.meAccess-Control-Allow-Methods: GET, POST, PUT //顯示伺服器支援的所有跨域方法Access-Control-Allow-Headers: X-Custom-Header //表示伺服器支援的額外請求頭Content-Type: text/html; charset=utf-8Content-Encoding : gzip
Content-Length: 0Keep-Alive: timeout=2, max=100Connection: Keep-Alive
Content-Type: text/plain
本篇詳解了跨域的相關問題，更多相關內容請留意php中文網。
相關推薦：
以上是什麼是跨域？跨域有幾種實現形式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！