产生跨域请求的原因及实例介绍

跨域请求，协议,域名,端口有一个不一样都是跨域请求。

产生跨域请求的原因：

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

比如https://www.1234.com和https://www.1234.com，同样都是80端口，但是协议不一样。又或者是https://m.1234.com和https://www.1234.com。二级域名不一样两个都是不同的域。又或者是https://www.1234.com:8080和https://www/1234.com:9090端口不一样也就是两个不同的域。

1> document.domain + iframe (只有在主域相同的时候才能使用该方法)

2> 动态创建script

这个没什么好说的，因为script标签不受同源策略的限制。

3> CORS

CORS背后的思想，就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。

IE中对CORS的实现是xdr

var xdr = new XDomainRequest();
xdr.onload = function(){
    console.log(xdr.responseText);
}
xdr.open('get', 'https://www.baidu.com');
......
xdr.send(null);

其它浏览器中的实现就在xhr中

var xhr =  new XMLHttpRequest();
xhr.onreadystatechange = function () {
    if(xhr.readyState == 4){
        if(xhr.status >= 200 && xhr.status < 304 || xhr.status == 304){
            console.log(xhr.responseText);
        }
    }
}
xhr.open('get', 'https://www.baidu.com');
......
xhr.send(null);

实现跨浏览器的CORS

function createCORS(method, url){
    var xhr = new XMLHttpRequest();
    if('withCredentials' in xhr){
        xhr.open(method, url, true);
    }else if(typeof XDomainRequest != 'undefined'){
        var xhr = new XDomainRequest();
        xhr.open(method, url);
    }else{
        xhr = null;
    }
    return xhr;
}
var request = createCORS('get', 'https://www.baidu.com');
if(request){
    request.onload = function(){
        ......
    };
    request.send();
}

4> JSONP

JSONP包含两部分：回调函数和数据。

回调函数是当响应到来时要放在当前页面被调用的函数。

数据就是传入回调函数中的json数据，也就是回调函数的参数了。

function handleResponse(response){
    console.log('The responsed data is: '+response.data);
}
var script = document.createElement('script');
script.src = 'https://www.baidu.com/json/?callback=handleResponse';
document.body.insertBefore(script, document.body.firstChild);
/*handleResonse({"data": "zhe"})*/
//原理如下：
//当我们通过script标签请求时
//后台就会根据相应的参数(json,handleResponse)
//来生成相应的json数据(handleResponse({"data": "zhe"}))
//最后这个返回的json数据(代码)就会被放在当前js文件中被执行
//至此跨域通信完成

使用ajax的jsonp

$.ajax({  
            url:"https://5678.com//rest/orgbg/select",      
            type:"get",  
            cache:false,  
            dataType:"jsonp",  
            jsonp:"callback", //这里定义了callback的参数名称，以便服务获取callback的函数名即getMessage  
            jsonpCallback:"getMessage", //这里定义了jsonp的回调函数  
            success:function(data){  
               // alert("success:"+data.data.orgBg);  
                $("#bg_context").append(removeHtml(data.data.orgBg));
            },  
            error:function(){  
                alert("发生异常");  
            }  
        });  

            function getMessage(jsonp){  
                alert("message:"+jsonp);  
            }