天天看點

原生jsonp請求解決跨域問題

跨域問題是因為浏覽器的同源政策,而出現的一種解決跨域問題的方法;

所謂同源政策是浏覽器為了安全起見,隻允許用戶端向同主機,同協定,同端口的伺服器發送Ajax請求。如果某一個頁面的來源位址與要發送請求的位址端口号主機名協定名有任意一項不相等,則阻止該請求的發送。

jsonp的思路:

浏覽器不會阻止跨域引入js檔案,通過script标簽引入方式來發送http請求,請求位址中使用參數形式形式發送callback的參數值,這個參數值代表回調函數的函數名,後端就可以通過擷取參數來得到回調函數的函數名(進而達到前後端函數名一緻);後端人員将要傳回的資料作為函數的實參傳回給前端,前端通過回調函數的形參拿到後端傳回來的資料再進行進一步處理。

代碼實作:

let script = document.createElement("script");
	script.src = "跨域請求資料的http請求位址?參數1=值1&參數2=值2...";
	document.querySelectorAll("body")[0].appendChild(script);
           

其他架構或庫大多都有自己封裝的方法去發送jsonp請求,比如jquery庫的$.ajax()方法