跨域和jsonp的瞭解和學習

1、爲何會有跨域問題呢

由於有瀏覽器的同源策略。

同源：若是兩個頁面的協議，端口（若是有指定）和主機都相同，則兩個頁面具備相同的源。咱們也能夠把它稱爲「協議/主機/端口 tuple」，或簡單地叫作「tuple". ("tuple" ，「元」，是指一些事物組合在一塊兒造成一個總體，好比（1，2）叫二元，（1，2，3）叫三元)

緣由就出在瀏覽器上，爲何瀏覽器要這樣作呢？同源策略限制了從一個源加載的文檔或者腳本如何與另外一個源的資源進行交互。這是個用於隔離潛在惡意文件的重要機制。

 

2、跨域

瀏覽器對於javascript的同源策略的限制,例如a.cn下面的js不能調用b.cn中的js,對象或數據(由於a.cn和b.cn是不一樣域),因此跨域就出現了.

看個例子：

好比:我在本地上的域名是study.cn,請求另一個域名一段數據

 

這個就是同源策略的保護,若是瀏覽器對javascript沒有同源策略的保護,那麼一些重要的機密網站將會很危險~

 

study.cn/json/jsonp/jsonp.html
請求地址	形式	結果
http://study.cn/test/a.html	同一域名,不一樣文件夾	成功
http://study.cn/json/jsonp/jsonp.html	同一域名,統一文件夾	成功
http://a.study.cn/json/jsonp/jsonp.html	不一樣域名,文件路徑相同	失敗
http://study.cn:8080/json/jsonp/jsonp.html	同一域名,不一樣端口	失敗
https://study.cn/json/jsonp/jsonp.html	同一域名,不一樣協議	失敗

 

 

 

 

 

 

 

這裏也能夠參考這篇：https://www.cnblogs.com/chenshishuo/p/4919224.html（上面的表格和圖片都是來自這篇博客）——《關於跨域,以及跨域的幾種方式》

 

還有更多關於跨域和同源策略的概念——https://segmentfault.com/a/1190000015597029——《不要再問我跨域的問題了》

 

 

3、跨域的解決方法

1. JSONP

個人理解就是幾個：

1. 咱們在調用js文件的時候又不受跨域影響,好比引入jquery框架的,或者是調用相片的時候;      並且凡是擁有scr這個屬性的標籤均可以跨域例如<script><img><iframe>

2. 一個callback傳參數的思想，大概就是在請求頁面那裏有個函數，樣子大概就function ddd(data){xxxx}，而後利用js的src請求服務端的時候，用callback參數告訴服務端這個ddd函數，而後服務端調用這個ddd，並把它要的參數傳進去，這樣數據就以json的方式傳過去遼。

 

具體的能夠看看這篇文章：https://blog.csdn.net/u010758410/article/details/80990706——《jsonp原理詳解——終於搞清楚jsonp是啥了》

 

 

2. 利用jQuery來實現

能夠理解成jQuery把JSONP這種思想和ajax結合在一塊兒了

$.ajax({
             type: "get",
             async: false,
             url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
             dataType: "jsonp",
             jsonp: "callback",//傳遞給請求處理程序或頁面的，用以得到jsonp回調函數名的參數名(通常默認爲:callback)
             jsonpCallback:"flightHandler",//自定義的jsonp回調函數名稱，默認爲jQuery自動生成的隨機函數名，也能夠寫"?"，jQuery會自動爲你處理數據
             success: function(json){
                 alert('您查詢到航班信息：票價： ' + json.price + ' 元，餘票： ' + json.tickets + ' 張。');
             },
             error: function(){
                 alert('fail');
             }
         });

 

 

 

3. 還有個經過iFrame的

emmm這個沒怎麼看，仍是看這篇吧：https://www.cnblogs.com/chenshishuo/p/4919224.html——《關於跨域,以及跨域的幾種方式》

 

 

4. 還有個利用CORS的

CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing）。它容許瀏覽器向跨源(協議 + 域名 + 端口)服務器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。

CORS須要瀏覽器和服務器同時支持。它的通訊過程，都是瀏覽器自動完成，不須要用戶參與。對於開發者來講，CORS通訊與同源的AJAX通訊沒有差異，代碼徹底同樣。瀏覽器一旦發現AJAX請求跨源，就會自動添加一些附加的頭信息，有時還會多出一次附加的請求，但用戶不會有感受。

所以，實現CORS通訊的關鍵是服務器。只要服務器實現了CORS接口，就能夠跨源通訊。

 

其餘能夠參考：https://www.cnblogs.com/cityspace/p/6858969.html——《CORS(跨域資源共享)》

或者這篇也有：https://segmentfault.com/a/1190000015597029——《不要再問我跨域的問題了》