跨域问题解决

1.JSONP

解决方法




    
    





服务端返回代码

flightHandler({
    "code": "CA1998",
    "price": 1780,
    "tickets": 5
});

原理很简单,服务端需要拼接如上的字符串

2.CORS背后的思想,就是使用自定义的HTTP头部让浏览器与服务器进行沟通

ie

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

其他

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', 'http://www.baidu.com');
......
xhr.send(null);

实现跨域的解决方案

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', 'http://www.baidu.com');
if(request){
    request.onload = function(){
        ......
    };
    request.send();
}

3.iframe 跨域

window.name属性的神奇之处在于name 值在不同的页面(甚至不同域名)加载后依旧存在(如果没修改则值不会变化),并且可以支持非常长的 name 值(2MB)。


  

 window.name = "{\"name\":\"hanzichi\", \"age\":10}"; '
?>

不可行,因为iframe.src 不同源


  

用代理文件如上,也不可行,会反复刷新

最后解决方案


  

注意此处不能用iframe.srcwindow.name 就换了

其他跨域待总结

你可能感兴趣的:(跨域问题解决)