前后端分離如何解決跨域問題？
JSONP(JSON with?Padding)（json? ?數(shù)據(jù)填充）只支持GET請求
是JSON的一種“使用模式”,可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題。
跨域產(chǎn)生原因是瀏覽器的同源策略。（為了安全）
不同源：
1.協(xié)議不同：http ?和 https
2.主域不同? ?www.domain001.com? ?和? www.domain002.com
3.端口號不同? http：//localhost:8088 ?和 http：//localhost:9000。
?
JSONP原理是:不同源的網(wǎng)站可以相互調(diào)用
src 屬性里加載的資源不受同源策略影響，具有跨域能力。
前端代碼：
1 2 3 4 5 6 7 8 9 10 11 | $(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 屬性必須設(shè)置正確 "jsonp"。
2.jsonp:屬性需要設(shè)置與后臺約定的參數(shù)，如果不設(shè)置默認也為callback。設(shè)置為其他的參數(shù)如? ?jsonWrap 時，Request URL ?鏈接將會變成：?http://www.oop.im/data.php?jsonWrap?=jQuery3310687844059098403_1530775709409&_=153077570
上圖藍色的?callback?即是?jsonp:"callback"，設(shè)置的，這個關(guān)鍵詞也可以跟后臺約定成其他的字符串（如 showJson）。
紅色字符串是jquery 隨機生成的字符串，后臺將數(shù)據(jù)作為參數(shù)包裹在這個隨機字符串函數(shù)里作為參數(shù)傳遞到前臺。
?
后臺代碼：
1 2 | $data?= json_encode(array('msg'=>'跨域測試','status'=>true));echo?$_GET['callback'].'('.$data.')'; |
后臺PHP 通過 $_GET("callback") 全局函數(shù)獲取到? 紅線框里的隨機字符串，并將這個字符串作為 包裹數(shù)據(jù)的函數(shù)名，返回給前臺。