jsonp 方式處理跨域前后端代碼如何配合？

JSONP(JSON with Padding)（json   數據填充）只支持GET請求

是JSON的一種“使用模式”,可用於解決主流瀏覽器的跨域數據訪問的問題。

跨域產生原因是瀏覽器的同源策略。（為了安全）

不同源：

1.協議不同：http  和 https

2.主域不同   www.domain001.com   和  www.domain002.com

3.端口號不同  http：//localhost:8088  和 http：//localhost:9000。

 

JSONP原理是:不同源的網站可以相互調用 <script src=“http://www.oop.im/data.php?callback=jQuery33107585929035461674_1530774352156&_=1530774352157”></script>

src 屬性里加載的資源不受同源策略影響，具有跨域能力。

前端代碼：

$(function(){
	$.ajax({
		url:'http://www.oop.im/data.php',
		type:'GET',
		dataType:'jsonp',
		jsonp:'callback',
		success:function(res){
			console.log(res);
		}
	});
})

　　注意點：1.dataType:"jsonp"  dataType 屬性必須設置正確 "jsonp"。

　　　　　　2.jsonp:屬性需要設置與后台約定的參數，如果不設置默認也為callback。設置為其他的參數如   jsonWrap 時，Request URL  鏈接將會變成： http://www.oop.im/data.php?jsonWrap =jQuery3310687844059098403_1530775709409&_=153077570

上圖藍色的 callback 即是 jsonp:"callback"，設置的，這個關鍵詞也可以跟后台約定成其他的字符串（如 showJson）。

紅色字符串是jquery 隨機生成的字符串，后台將數據作為參數包裹在這個隨機字符串函數里作為參數傳遞到前台。

 

后台代碼：

$data = json_encode(array('msg'=>'跨域測試','status'=>true));
echo $_GET['callback'].'('.$data.')';

　　

后台PHP 通過 $_GET("callback") 全局函數獲取到  紅線框里的隨機字符串，並將這個字符串作為 包裹數據的函數名，返回給前台。