使用Jsonp解决跨域请求数据问题

同源策略(Same origin policy)是一种约定,所谓同源是指,域名,协议,端口相同。

可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。

如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问。


阿远博客

解决跨域问题的方式有很多,今天我们了解比较简单的两种:


1、在服务端添加 header 头,* 为所有域名都可以访问。

header('Access-Control-Allow-Origin:*');


2、ajax声明jsonp形式获取数据。

#Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。

#前端 test.html 代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    $.ajax({
        url:"http://test.admin.test.com:8081",
        type:"get",
        cache:false,
        dataType:"jsonp",
        jsonp:"callback", //这里定义了callback的参数名称,以便服务获取callback的函数名即getMessage
 jsonpCallback:"getMessage", //这里定义了jsonp的回调函数(会先执行)
 success:function(data){
            alert("success:"+data.name);
        },
        error:function(){
            alert("发生异常");
        }
    });

    function getMessage(jsonp){
        alert("message:"+jsonp.name);
    }
</script>
</html>

#服务端 index.php 代码:

<?php

$arr=array(
'name'=>'lisi',
'age'=>'18'
);

echo $_GET['callback'].'('.json_encode($arr).')';


#执行 test.html 效果如下:

阿远博客



以上两种方式都可以解决跨域问题,当然还有很多种!

大家想更加全面的了解 JSONP,推荐前往☞☞☞JSONP教程

thanks~





阿远博客
请先登录后发表评论
  • 最新评论
  • 总共0条评论