前后端分離如何解決跨域問題？
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原理是:不同源的網站可以相互調用
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 屬性必須設置正確 "jsonp"。
2.jsonp:屬性需要設置與后臺約定的參數，如果不設置默認也為callback。設置為其他的參數如? ?jsonWrap 時，Request URL ?鏈接將會變成：?http://www.oop.im/data.php?jsonWrap?=jQuery3310687844059098403_1530775709409&_=153077570
上圖藍色的?callback?即是?jsonp:"callback"，設置的，這個關鍵詞也可以跟后臺約定成其他的字符串（如 showJson）。
紅色字符串是jquery 隨機生成的字符串，后臺將數據作為參數包裹在這個隨機字符串函數里作為參數傳遞到前臺。
?
后臺代碼：
1 2 | $data?= json_encode(array('msg'=>'跨域測試','status'=>true));echo?$_GET['callback'].'('.$data.')'; |
后臺PHP 通過 $_GET("callback") 全局函數獲取到? 紅線框里的隨機字符串，并將這個字符串作為 包裹數據的函數名，返回給前臺。
評論
圖片
表情