产生跨域的情况
- 同一域名，不同端口；
- 同一域名，不同协议；
- 同一域名，不同二级域名；
- 主域相同，子域不同；
- 不同域名；
- 使用与域名对应的IP；
对于最后一种，判断为跨域是因为：域是通过‘URL的首部’来识别而不会去尝试判断相同的IP地址是否对应同一个域。
URL首部指window.location.protocol+window.location.host
另外，如果是协议和端口造成的跨域问题，前端没有办法解决。
JavaScript解决方案
1.document.domain+iframe
该方法只能解决上面的第四种情况，在两个不同域的文件中，分别加上：
document.domain = 'a.com';
然后通过在其中一个文件中创建一个iframe，控制iframe的contentDocument进行js的交互。
//www.a.com/a.html
var ifr = document.createElement('iframe');
ifr.src = http://Script.a.com/b.html;
document.appendChild(ifr);
ifr.onload = function(){
var doc = ifr.contentDocument||ifr.contentWindow.document;
//通过doc操作b.html
}
备注：domain 默认等于window.location.hostname。主域名是不带www的域名（a.com）。domain只能设置成主域名。
2.动态创建script（jsonp）
浏览器并不禁止页面中引用并执行其他域的js文件，所以可以通过创建script节点实现完全跨域通信。
//这里js是引用了其他域的script节点。
js.onload = function(){
if(!this.readyState||this.readyState==='loaded'){
//执行返回来的callback
}
}
3.location.hash
原理是利用location.hash来进行传值（在url：http://a.com#helloworld中的#helloworld就是location.hash）。因为改变hash并不会导致页面刷新，但是传递的数据容量是有限制的。
4.window.name
利用window 的 name 属性实现跨域的原理是：name属性在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。换句话说，name属性不会因为页面的url变化而变化。
在需要请求的目标页面target.html中设置window.name
//target.html
window.name = '想要获取的信息';
因为name值只对位于同一域下的页面可见。为解决这一限制，在源页面中利用iframe，使iframe加载目标页面，这时源页面中的iframe的window.name就会等于target.html的window.name。
但是，源页面依然无法获取到iframe的window.name属性，因为源页面和其中的iframe不同源。所以这时需要把iframe的url重新指向与源页面同域的proxy.html页面。
iframe = document.createElement('iframe'),
iframe.src = 'http://localhost:8080/data.php';
document.body.appendChild(iframe);
iframe.onload = function() {
iframe.src = 'http://localhost:81/cross-domain/proxy.html';
console.log(iframe.contentWindow.name)
};
这样就能获取到target.html中保存于window.name的数据了
5.使用HTML5的 postMessage
postMessage()是HTML5新增的API，具体来看MDN的描述：HTML5 Window.postMessage()
网友评论