1. 程式人生 > >js跨越請求的2中實現 JSONP /後端接口設置運行跨越header

js跨越請求的2中實現 JSONP /後端接口設置運行跨越header

分隔 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