js跨越请求的2中实现 JSONP /后端接口设置运行跨越header

由于浏览器同源策略，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

最新文章

热门文章