跨域的另外两种解决思路

1.jsonp

2.domain

 

首先说第一种：jsonp

 主要思路是通过页面上script标签引入一个src为目标js的方法

比如，在桌面新建一个crossDomain.html页面，它里面的代码需要利用ajax获取一个不同域上的json数据，假设这个json数据地址是http://192.168.x.xxx/JSONP/jsonpTest.php那么crossDomain.html中的代码就可以这样：

<script type="text/javascript">
var text = document.querySelector('.text');
function dosomething(jsondata) {
    var str = "";
    for (var i = 0; i < jsondata.length; i++) {
        str += jsondata[i];
    }
    text.innerHTML = '我是JS通过JSONP跨域请求来的数据：'+'<span class="show">'+str+'</span>';
}
</script>
<script type="text/javascript" src="http://192.168.x.xxx/JSONP/jsonpTest.php?callback=dosomething"></script>

可以看到在获取数据的地址后面还有一个callback参数，按惯例是用这个参数名，但是你用其他的也一样。当然如果获取数据的jsonp地址页面不是你自己能控制的，就得按照提供数据的那一方的规定格式来操作了。

因为是当做一个js文件来引入的，所以http://192.168.x.xxx/JSONP/jsonpTest.php返回的必须是一个能执行的js文件，所以这个页面的php代码可能是这样的:

<?php
    $callback = $_GET['callback'];//得到回掉函数名
    $data = array('a','b','c'); //要返回的数据
    echo $callback.'('.json_encode($data).')'; //输出
?>

得出结果：

["a", "b", "c"]

可以看到请求成功了，然后就可以在crossDomain.html这个页面里处理这个数据了。 
这样jsonp的原理就很清楚了，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。 
当然可以直接用一些已经封装过的库，这样就不用每次去创建script标签了。如下为JQ的跨域API

    $.getJSON('http://192.168.x.xxx/JSONP/jsonpTest.php?callback=?',function(jsondata){
        console.log(jsondata);//["a", "b", "c"]
        var str = "";
        $.each(jsondata,function(i,index){
            return str += index;
        });
        $(".text1").html('我是JQ通过JSONP跨域请求来的数据：'+'<span class="show">'+str+'</span>');
    });

jquery的getJSON方法会自动生成一个全局函数来替换callback=?中的问号，之后获取到数据后又会自动销毁，实际上就是起一个临时代理函数的作用。$.getJSON方法会自动判断是否跨域，不跨域的话，就调用普通的ajax方法；跨域的话，则会以异步加载js文件的形式来调用jsonp的回调函数。

 

2.设置主域domain

注意父子页面都要设置该主域，这样两个域才能重合，亲自踩坑。其中同一主域的意思不一定非要一级域名，二级甚至三级域名也行，比如a页面是：map.js.tel.ai.com  b页面是： kk.tel.ai.com 这个时候domain是：tel.ai.com