码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-04-19 15:08:00      阅读:280      评论:0      收藏:0      [点我收藏+]

标签:AC   jquer   jsonp   ons   .com   回调   handle   false   echo   

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

标签:AC   jquer   jsonp   ons   .com   回调   handle   false   echo   

原文地址:https://www.cnblogs.com/guohong-hu/p/8882349.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!