跨域问题及其解决方法（JSONP&CORS）

• jsonp跨域优点：

jsonp兼容性强，适⽤于所有浏览器，尤其是IE10及以下浏览器。

• jsonp跨域缺点：

没有关于调⽤错误的处理。
只⽀持GET请求，不⽀持POST请求以及⼤数据量的请求，⽽且也⽆法拿到相关的返回头，状态码等数据。
callback参数恶意注⼊，可能会造成xss漏洞。

　　2.跨域资源共享（CORS） 

跨域资源共享（Cross-origin resource sharing，CORS）是⼀个 W3C标准，允许浏览器向跨域服务器发送请求，从⽽克服了ajax只能同源使⽤的限制。CORS需要浏览器和服务器同时⽀持。⽬前，所有主流浏览器（IE10及以上）使⽤XMLHttpRequest对象都可⽀持该功能，IE8和IE9需要使⽤XDomainRequest对象进⾏兼容。

CORS整个通信过程都是浏览器⾃动完成，浏览器⼀旦发现ajax请求跨源，就会⾃动在头信息中增加Origin字段，⽤来说明本次请求来⾃哪个源（协议+域名+端⼝）。因此，实现CORS通信的关键是服务器，需要服务器配置Access-Control-Allow-Origin头信息。当CORS请求需要携带cookie时，需要服务端配置Access-Control-Allow-Credentials头信息，前端也需要设置withCredentials。浏览器将CORS请求分成两类：简单请求和⾮简单请求。简单请求需要满⾜以下两⼤条件：

1. 请求⽅法是以下三种⽅法之⼀：HEAD、GET、POST。
2. HTTP的头信息不超出以下⼏种字段：Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type：只限
于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain。
CORS简单请求跨域实现流程：

// IE8/9需⽤XDomainRequest兼容 var xhr = new XMLHttpRequest();  // 前端设置是否带cookie xhr.withCredentials = true; xhr.open('post', 'http://a.qq.com/index.php', true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send('user=saramliu'); xhr.onreadystatechange = function() {     if (xhr.readyState == 4 && xhr.status == 200) {         alert(xhr.responseText);     } };

<!-- A页⾯ http://a.qq.com/a.html --> <iframe id="iframe" src="http://b.qq.com/b.html"></iframe> <script> document.domain = "qq.com"; var windowB = document.getElementById("iframe").contentWindow; alert("B页⾯的user变量：" + windowB.user); </script>

 <!-- B页⾯ http://b.qq.com/b.html --> <script> document.domain = "qq.com"; var user = "saramliu"; </script>

<!-- A页⾯ http://a.qq.com/a.html --> <iframe id="iframe" src="http://b.qq1.com/b.html"></iframe> <script>     // 监听c.html传来的hash值     window.onhashchange = function () {         alert("B页⾯传递数据：" + location.hash.substring(1));     }; </script> <!-- B页⾯ http://b.qq1.com/b.html --> <iframe id="iframe" src="http://a.qq.com/c.html"></iframe> <script>     // 向c.html传递hash值     var iframe = document.getElementById('iframe');     setTimeout(function() {         iframe.src = iframe.src + '#user=saramliu';     }, 1000); </script> <!-- C页⾯ http://a.qq.com/c.html --> <script>     // 监听b.html传来的hash值     window.onhashchange = function () {         // 操作同域a.html的hash值，传递数据         window.parent.parent.location.hash = window.location.hash.substring(1);     }; </script>

<!-- A页⾯ http://a.qq.com/a.html --> <iframe id="iframe" src="http://b.qq1.com/b.html"></iframe> <script> var state = 0; var iframe = document.getElementById('iframe'); iframe.onload = function() { if (state === 1) { // 第2次onload成功后，读取同域window.name中数据 alert(iframe.contentWindow.name); } else if (state === 0) { // 第1次onload成功后 state = 1; } }; </script>

 <!-- B页⾯ http://b.qq1.com/b.html --> <script>     window.name = "这⾥是B页⾯!";     window.location = "http://a.qq.com/c.html"; </script>

otherWindow.postMessage(message、targetOrigin、[transfer])

<!-- A页⾯ http://a.qq.com/a.html --> <iframe id="iframe" src="http://b.qq1.com/b.html"></iframe> <script>     var iframe = document.getElementById('iframe');     iframe.onload = function() {         var data = {meesage: "这⾥是A页⾯发的消息"};          var url = "http://b.qq1.com/b.html";         // 向B页⾯发送消息         iframe.contentWindow.postMessage(JSON.stringify(data), url);     };     window.addEventListener("message", function(e) {         alert("B页⾯发来消息：" + JSON.parse(e.data));     }); </script>

 <!-- B页⾯ http://b.qq1.com/b.html --> <script>     window.addEventListener("message", function(e) {         alert("A页⾯发来消息：" + JSON.parse(e.data));         var data = {meesage: "这⾥是B页⾯发的消息"};          var url = "http://a.qq.com/a.html";         window.parent.postMessage(JSON.stringify(data), url);     }, false); </script>