js跨域总结

js跨域总结

什么是跨域

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。所谓同源是指，域名，协议，端口均相同。任何一个不同在交流数据时就会产生跨域。

解决方法

1.document.domain + iframe

document.domain是当前网页的域名，如www.abc.com的document.domain=www.abc.com。这个变量可以被赋值，但是只能被赋值为当前域名或者基础域名。如www.abc.com和abc.com。其它赋值都会报错。
如果一个页面用iframe引入另外一个页面，只能看其内容，却不能操作其内容数据。但是如果两个网页的document.domain相同时，是可以互相操作页面内容的。
所以这种跨域的方法是将两个网页中document.domain设置为相同值，这也就决定了这个方法的使用情景，你能够设置两个页面的domian，同时这个设置要符合规定。

2.动态创建script标签

这个方法是利用script的src属性可跨域性质。
直接上例子(网上找的关于登陆判断的例子)：

后端代码

$arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);  
$result=json_encode($arr);  
//动态执行回调函数  
$callback=$_GET['callback'];  
echo $callback."($result)"; 

解读：
前端页面用script的src将函数名传至后台，后台获取函数名，返回一条包含函数名和参数的语句。前端得到返回值，获取参数，同时执行该函数，实现跨域。
该方法与动态创建script标签基本一样，只不过在需要发送一些页面中的参数时用动态创建script标签，jsonp方法无需传页面中参数，直接写标签即可，也可动态创建。

4.cors跨域

前端代码，在xhr的setRequestHeader方法中设置Origin属性，例：

xhr.setRequestHeader("Origin", "http://www.abc.com")

其中xhr是原生ajax的xhr对象，在jquery中的beforesend方法中可获取原生xhr对象

beforesend:function(xhr){
    xhr.setRequestHeader("Origin", "http://www.abc.com")
}

在后台中设置两个属性

Access-Control-Allow-Origin, "http://www.abc.com";
"Access-Control-Allow-Methods, "GET, POST, PUT, DELETE";
//当Access-Control-Allow-Origin设置为"*"时，前端无需设置请求头，可直接访问

5.postmessage

postmessage解决的是两个页面间的跨域通信，比如iframe嵌套页面等。
举例，一个页面通过iframe引用另一个页面。

//获取页面中的iframe
var iframe = document.getElementById('myIFrame').contentWindow;
//注意：contentWindow
iframe.postMessage(message,uri)
//message理论上可以是任何类型的数据，但是不同浏览器对其支持不同，尽量使用字符串，uri是目标uri。
//在iframe中监听message事件
window.addEventListener('message',function(event) {
    if(event.origin !== 'http://davidwalsh.name') return;
    console.log('message received:  ' + event.data,event);
    event.source.postMessage('backmessage!',event.origin);
},false);
//event对象中包含很多属性，Origin是信息源域名，在接受信息处理前应判断源。data是接受的数据。sourse是信息源contentWindow的引用。

需要注意的是h5新增方法，注意兼容性。

其它方法

webcosket，window.name+iframe，服务器请求服务器是没有跨域限制的，而且上面集中方法已经涵盖常见的跨域情况，推荐cors，写法简单，前端和后台都无需过多代码。