跨域科普以及JSONP跨域方法

首先科普一下域,這裏只說前端的域。
前端的域是指服務器在網絡上佔據的地址。
跨域指的是瀏覽器請求了服務器A的某個頁面,在操作該頁面時,發送了一個請求B服務器的資源,這種現象就叫做跨域。

如何更詳細的判定是否跨域呢?
當協議(http/https),端口或域名中有任何一個不同時,就視爲跨域了。

爲什麼要進行跨域?
瀏覽器針對跨域設置了一個策略叫同源策略:原則上只允許請求同一個服務器的資源。注意,靜態資源不受跨域限制,靜態資源就是不會改變的資源,如圖片,CSS文件,JS文件等。

利用JSONP進行跨域
jsonp跨域利用的是script標籤無視同源策略並且還能執行代碼的特定。需要注意的是,該方法需要接口返回的是一個函數的執行纔可以。比如:
在這裏插入圖片描述
這裏echo的就是一個函數的執行,callbackname是函數名。

具體的封裝跨域函數代碼如下:

 function jsonp(url, data, callback) {  參數分別是請求的域名,query和回調函數
     var str = "";
     for (var i in data) {
         str += i + "=" + data[i] + "&";
     }
     str = str.slice(0, -1);
     window[data.callbackname] = callback;          
     var script = document.createElement("script");
     script.src = url +"?"+str;
     document.body.appendChild(script);
     script.onload = function(){
         script.remove()
         delete window[data.callbackname];
     }
 }
發佈了8 篇原創文章 · 獲贊 6 · 訪問量 951
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章