跨域在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中文網其他相關文章!