對於跨域的詳細介紹

 要學習跨域策略，首先要知道為什麼跨域：

　　瀏覽器的同源策略，出於防範跨站腳本的攻擊，禁止客戶端腳本（如JavaScript）對不同域的服務進行跨站呼叫。

具體點來說，網站請求的協定名稱protocol、 主機host、 埠號port的其中一個不同，網站之間的資料傳輸就形成了跨網域呼叫。

這篇文章的所有例子都使用Node.js作為服務端進行的，同時是對連接埠號不同的情況來舉例子，本次將會使用3001和3002兩個

連接埠號。

首先，建立一個表單，如圖：

　　

#對於正常的非跨域的請求，一般是這樣子的：

html：

 

前端js部分（ajax）：

#服務端的程式碼：

註：此處讀取post方法的內容是使用了Node.js的formidable模組，之後所有的post的數據，均使用此模組接受

請求頁面傳回的結果是：

##現在的回傳結果是屬於訪問3001埠的，那麼如果存取3002埠會是什麼樣子呢？

對！他就成了這樣了！他不允許你跨連接埠號碼存取！ ！ ！

但是呢，在服務端的控制台卻有這樣的輸出：

#這是什麼意思呢？接下來，附上程式碼，一點點說明白：

ajax請求部分值修改了url

部分：

##也就是把連接埠號碼3001換成了3002，其餘的與上面的一模一樣，

服務端程式碼與上面的一樣，只不過監聽了3002端口，

#透過程式碼可以發現，即使連接埠號碼不同，ajax中服務端仍能收到前台傳過來的數據，

#也就是上面控制台列印出來的數據，說明不是服務端拒絕跨站請求，而是服務端

收到資料並處理返回時，被瀏覽器給限制攔截了。

當然解決跨域限制的方法也有很多，現在講這麼4種：

　　1.利用JSONP 實作跨域呼叫

　　　　首先，借用一段話介紹一下JSONP：

　　　　JSONP 是JSON 的一種使用模式，可以解決主流瀏覽器的跨域資料存取問題。其原理是根據XmlHttpRequest 物件受到同源策略的影響，

           而<script> 標籤元素卻不受同源策略影響，可載入跨網域伺服器上的腳本，網頁可從其他來源動態產生JSON 資料。用 JSONP取得的</script>

           不是 JSON 數據，而是可直接運作的 JavaScript 語句。

　　　　（1）使用Jquery的$ajax來實現jsonp

　　　　　　  這時，ajax請求代碼為：

　　　　　 服務端對應的程式碼為：

　　　　　　

　　　　　　此時，瀏覽器的控制台會輸出：

　　　　　　　　　　　　　　　　　　　　擦亮雙眼，服務端的接受請求方式是get，而發出請求的ajax方式卻為post，

#　　　　　　這是為什麼呢？請看這個東東：

　　　　　　

　　　　　　這個是上面的請求的http頭信息，url竟然是按照get方法去傳遞參數的，所以服務端接受數據採用的get方法，

　　　　　究其原因還是因為jsonp原理是用<script>標籤來發請求的，受限於script的格式，只能用get方法了，傳輸形式為：</script>

　　　　#　　　;script src = 'http://localhost:3001/blog?callback=jsonpCallback&name=%E5%BC%A0%E4%B8%89&id=05142075&_=1496753697939'; 　　　　　　

（2）用js原生<script>實作jsonp<p><strong>　　　　　　　　　　　　　　　點擊的時候創建節點並加入head節點內，並且把src設定為位址即可，請求傳回結果為：　　　　　　　　<p><p>　　　　　　　　　　　　　　　　##　　　　　　　　經過原生的script標籤方法可以看出jsonp有一下幾點弱勢：<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/58938c43a6f83f55c932e2936e4cb3bf-13.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/>　　　　　　　　　　搭邊，所以不可以註冊事件來監聽器狀態，不能很好的發現錯誤。 <p>　　<p>2.CORS實作跨域呼叫<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/58938c43a6f83f55c932e2936e4cb3bf-14.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/><p>#　　　　　　<p>再藉用一段話來介紹一下CORS：<p><p>　　　　　　Cross-Origin Resource Sharing（CORS）跨域資源共享是一份瀏覽器技術的規範，提供了Web 服務從不同域傳來沙盒腳本的方法，<p><strong>　　　　　　　　以避開瀏覽器的同源策略，是JSONP 模式的現代版。與 JSONP 不同，CORS 除了 GET 要求方法以外也支援其他的 HTTP 要求。用　　　　　　CORS 可以讓網頁設計師用一般的 XMLHttpRequest，這種方式的錯誤處理比 JSONP 要來的好。另一方面，JSONP 可以在不支援<p><strong>　　　　　　CORS 的老舊瀏覽器上運作。現代的瀏覽器都支援 CORS。 <strong>　　　　　　（1）CROS的實作<br/>　　　　　　ajax要求代碼：<p>　　　　　　　　　　　　　<p><p>##　　　　　　請求回傳結果為：<p>　　　　　　<p>#　　　　　　　　　<p><p>　　　　　　　　　哈域就不是簡單的，這不是簡單的了呢？ <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/58938c43a6f83f55c932e2936e4cb3bf-15.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/> 　　　　　　這個方法是在服務端回傳資料得時候加一下http頭訊息，最重要的是Access-Control-Allow-Origin，<p>　　　　　資訊　，這個標題資訊　，這個網域頭訊息　，其餘的可以去學習CROS的具體細節。對於CORS，你只需要吧這些<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/619ad8347d28b7a25c8b59de42484d36-16.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/>　　　　　　頭訊息寫上去，其餘的瀏覽器幫你完成。 <p>　　　　　　CROS的優點很明顯，可以支援多方式請求，get，post，put等，它還是使用 XmlHttpRequest 進行傳輸<p>　　　　　　　可以註冊錯誤處理狀態，可以註冊錯誤處理方式。 <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/619ad8347d28b7a25c8b59de42484d36-17.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/>　　　　　　當然，它也有自己的的缺點，就是對於低版的瀏覽器不支援。　　　　　<p> <p></script>

以上是對於跨域的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！