js跨越請求的2中實現 JSONP /後端接口設置運行跨越header
阿新 • • 發佈:2018-04-19
分隔 java 參數 pre jquery實現 域名 jquery api 設置
由於瀏覽器同源策略,a域名的js向b域名ajax請求會被禁止。JS實現跨越訪問接口有2中辦法。
1.後端接口設置允許跨越的header頭。
//header(‘Access-Control-Allow-Origin:*‘); //支持全域名訪問,不安全,部署後需要固定限制為客戶端網址 header(‘Access-Control-Allow-Origin:http://www.example-a.com‘); //設置的是帶協議的url,而不是一個域名。可以設置多個url,用逗號分隔 echo json_encode([‘name‘=>‘lucy‘]);}
客戶端正常ajax請求即可。
2.客戶端通過jsonp請求,服務器不用設置跨越header。關於jsonp原理這裏不再說,可以另外查找資料。下面給出個實現的具體方法。
客戶端請求,以jquery實現為例子
<script type="text/javascript"> $(document).ready(function(){ $.ajax({ type : "get", async: false, url : "http://www.example-a.com/api.php?id=1", dataType: "jsonp", jsonp:"callback", //請求php的參數名 //jsonpCallback: "jsonhandle",//要執行的回調函數,(jquery中,這個參數可以省略,jquery會隨機生成一個名字) success : function(data) { console.log(data); } }); }); </script>
api.php
<?php //完成業務邏輯 獲得數據 echo $_GET[‘callback‘]. ‘(‘. json_encode($data). ‘)‘; //$_GET[‘callback‘],就是上面jquery中jsonp請求的 ‘jsonp’參數
?>
js跨越請求的2中實現 JSONP /後端接口設置運行跨越header