总结两种常见的前端跨域方案CORS与JSONP

一，目前主流的JSONP，这个名字的来源是jq的Ajax请求有现成的封装好了的跨域方法，只需要在Ajax请求里设置一个dataType属性等于jsonp即可：

$.ajax({  

        type : "get",  

        async:false,  

        url : "http://xxxx.com/index.html?sid=1494&busiId=101",

        dataType : "jsonp",//数据类型为jsonp  

        jsonp: "jsonpCallback",//服务端用于接收callback调用的function名,实际可以不填  

        success : function(data){

            上面jsonp参数可以不填，因为jq会把返回值放到success里设置此处的回调，所以实际上像平常的ajax请求那样写即可

        },  

        error:function(){     alert('fail');       }  

    });  

jsonp的原理实则很简单，相当于利用了一个浏览器的漏洞，因为平常在HTML里引入资源时无论是css、图片、script都是可以不分站点的，也就是自带了跨域，此时我们只需用js创建一个script标签，把src设置成服务器的地址，并把回调加在src(即http:xxxx.com/index.html?callback=xxxxx)，此时服务器配合截取callback，然后返回此callback的参数调用(即返回一个可执行的JS代码)，就实现了跨域并回调的效果。

此方式的好处是兼容性好，浏览器都支持，但安全性不够高，且只不支持POST请求，即使发的是post请求，也会变为get。

二、W3C推荐的CORS，此种方式是标准推荐的，是一个更好的方式，也是未来的方式，前端的实现方式很简单，只是在原生的http请求基础上，在设置请求头部信息时，要多设置一个Origin属性，把此属性指向服务器允许的地址即可：

   var xhr = new XMLHttpRequest();

    xhr.open("post", "http://xxxxx.com/index.html", true);

    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    // 声明请求源

    xhr.setRequestHeader("Origin", "http://example.com");

    xhr.onreadystatechange = function () {

        if (xhr.readyState == 4 && xhr.status == 200) {

            var responseText = xhr.responseText;

            console.info(responseText);

        }

    }

    xhr.send();

此方式的好处是安全且是标准推荐的，缺点是ie10以下的浏览器不支持，所以导致它尚未能成为主流方式。