JS 跨域问题和解决方案

跨域问题是浏览器同源策略限制，当前域名的js只能请求相同域名下url。
解决方式通常有两种：
1.使用jsonp,要求在后端返回的是jsonp格式的数据
js代码:

$("button").click(function(){
    $.ajax({
        url:"http://xxx:8000/api/getInfo",
        dataType:"jsonp",
        success:function(result){
            $("p").html(result.msg);
        },error:function(){
            console.log('fail');
        }
    });
});

后端代码：

if(isset($_REQUEST ['callback'])&&!empty($_REQUEST['callback'])){
    $jsoncallback = htmlspecialchars($_REQUEST ['callback']);
}
echo $jsoncallback . '(' . $json_data . ')';
die();

后端的代码先判断是否有callback，有的话则需要返回的jsonp格式数据



本质是往head里面append了一个script标签，相当于是请求了一个文件，服务端返回对应格式的文件，利用的是<script>标签的src，

缺点在于它只支持GET请求而不支持POST等其它类型的HTTP请求；

它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题

2.第二种方式在后端header设置Access-Control-Allow-Origin:*
JS代码
    $("button").click(function(){
        $.ajax({
            url:"http://xxx:8000/api/getInfo",
            dataType:"json",
            type:'post',
            data:'id=123',
            success:function(result){
                $("p").html(result.msg);
            },error:function(){
                console.log('fail');
            }
        });
    });
后端代码：
header('Access-Control-Allow-Origin:*');
echo $json_data;
die();
采用着这种方式优点在于支持post方式，缺点在于相当于api对外开放了，所以要加上要传递一些参数，
{
    'name': 用户名,
    'key': 加密的验证key,
    'timestamp': 时间戳,
}


在测试的时候，采用jsonp的方式，在后端代码设断点，发起请求之后进入到了断点。
而采用设置Access-Control-Allow-Origin:*的时候，怎么也进不到断点里，不过最终后端都有返回数据。