跨域在js中會經常遇見,本篇將會對其進行相關的講解。 同源策略是個很好的安全機制,但是有時候我們需要從不同的域下獲取資料或進行交互,而這個時候同源策略會造成阻礙。 跨域,就是為了實現不同來源下資料資訊傳輸與互動。 實作跨域有以下幾種方式:1.JSONPJSONP是JSON with padding(參數式JSON)的簡寫,是JSON的一種新應用方式。 JSONP的實現,依靠動態的元素來使用,因為<script>不受同源策略限制,有能力從其他域中加載資源,示例:<br>透過<script>請求傳回一個JSONP</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><script src=""http://freegeoip.net/json/?callback=handleResponse>登入後複製傳回的JSONP由兩個部分組成:回呼函數和JSON資料 handleResponse(JSON) #因為透過標籤請求的資料會被當作js程式碼執行,因此回呼函數會對JSON資料進行處理,在這個範例裡,回呼函數就是handleResponse。通常回呼函數名稱會以參數的方式寫入請求url中,且在本地定義好回呼函數。 <br>缺點:JSONP是從其他網域載入程式碼執行,如果其他網域不安全,則回應中很可能會夾帶一些惡意程式碼,此時除了放棄使用JSONP外,沒有辦法追究,因此要確保資料來源的安全。 <br>2.CORS<br>CORS(Cross-Origin Resource sharing,跨網域資源共用)是Ajax跨網域請求的一種方式,定義了在必須存取跨網域資源時,瀏覽器與伺服器應該如何進行溝通。 <br>CORS背後的基本思想,就是使用定義的HTTP頭部讓瀏覽器與伺服器溝通,從而決定請求或回應是否應該成功。 <br>CORS分為簡單請求和複雜請求<br>同時滿足下面兩個條件的為簡單請求:<br>1.請求方式為get、post、head三者中的一種;<br>2.請求頭資訊不超出這幾種欄位:Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type只限於三個值application/x-www-form-urlencoded、multipart/form-data、 text/plain<br>簡單請求範例:<br>在我們跨網域發送簡單請求時,會定義一個Origin頭部,說明請求來源</p> <p>Oring:http://www.baidu.com //說明這一請求是http://www.baidu.com發出的<br></p> <p>如果伺服器認為這個請求可以接受,就在Access-Control-Allow-Origin頭部中傳回相同的來源資訊(假設為公共資源,則可以傳回「*」)</p> <p>Access-Control-Allow-Origin:http://www.baidu.com<br></p> <p>如果沒有這個頭部,或頭部的來源資訊不匹配,瀏覽器就會攔截掉回傳的回應。 <br>除了簡單請求外,都是複雜請求<br>複雜請求與簡單請求類似,只是在發送正式請求之前,會先發送一個預檢請求,確認當前域是否在伺服器許可範圍中,伺服器可以接受什麼HTTP頭資訊、請求方式、資料類型等。得到許可回覆以後,才會開始正式通信。 <br>下面是預檢請求頭和回應頭</p> <p>//這是一個預檢請求頭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<br>Accept-Language: en-US<br>Connection: keep-alive<br>User-Agent: Mozilla/5.0...<br>//這是一個預檢回應頭HTTP/1.1 200 OKDate: Mon, 01 Dec 2008 01:15:39 GMT<br>Server: Apache/2.0.61 (Unix)<br>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<br>Content-Length: 0Keep-Alive: timeout=2, max=100Connection: Keep-Alive<br>Content-Type: text/plain</p> <p>本篇詳解了跨域的相關問題,更多相關內容請留意php中文網。 </p> <p>相關推薦:</p> <p><a href="http://www.php.cn/js-tutorial-397338.html" target="_blank">對於函數事件的總結</a><br></p> <p><a href="http://www.php.cn/js-tutorial-397335.html" target="_blank">關於正規表示式的相關理解</a><br></p> <p><a href="http://www.php.cn/js-tutorial-397319.html" target="_blank">Javascript中關於this的用法</a><br></p>