首頁 >web前端 >js教程 >對於跨域的詳細介紹

對於跨域的詳細介紹

零下一度原創: 2017-06-26 11:42:161085瀏覽

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

　　瀏覽器的同源策略，出於防範跨站腳本的攻擊，禁止客戶端腳本（如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取得的 不是 JSON 數據，而是可直接運作的 JavaScript 語句。 　　　　（1）使用Jquery的$ajax來實現jsonp 　　　　　　這時，ajax請求代碼為： 　　　　　服務端對應的程式碼為：<img src="https://img.php.cn/upload/article/000/000/001/3ec5c16e14e00b5a7e924babc4fc391f-9.png" alt="">　　　　　　 　　　　　　此時，瀏覽器的控制台會輸出：<img src="https://img.php.cn/upload/article/000/000/001/a91fb113b3f5cd6d7b5e64c45a16003c-10.png" alt="">　　　　　　　　　　　　　　　　　　　　擦亮雙眼，服務端的接受請求方式是get，而發出請求的ajax方式卻為post，#　　　　　　這是為什麼呢？請看這個東東：<img src="https://img.php.cn/upload/article/000/000/001/a91fb113b3f5cd6d7b5e64c45a16003c-11.png" alt="">　　　　　　 　　　　　　這個是上面的請求的http頭信息，url竟然是按照get方法去傳遞參數的，所以服務端接受數據採用的get方法， 　　　　　究其原因還是因為jsonp原理是用<script>標籤來發請求的，受限於script的格式，只能用get方法了，傳輸形式為： 　　　　#　　　;script src = 'http://localhost:3001/blog?callback=jsonpCallback&name=%E5%BC%A0%E4%B8%89&id=05142075&_=1496753697939'</script>;

（2）用js原生