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

作者: xahy 分类: 笔记 发布时间: 2019-07-18 08:50

同源策略(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).')';

 

以上两种方式都可以解决跨域问题,当然还有很多种!
大家想更加全面的了解 JSONP,推荐了解☞☞☞JSONP教程

 

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注