前端 跨域问题 详解

1、什么是跨域

	跨域请求，简单说就是从一个域访问另一个域下的数据或资源。受同源策略限制，javascript不能跨域，那么什么是同源策略？
	同源策略：它会阻止从一个域上加载的脚本去获取或者操作另一个域上的文档属性。也就是说，受到请求的url的域必须与当期web页面的域相同。这说明浏览器隔离来自不同源的内容，以防止他们之间的操作。那么为何要使用同源策略呢？
	同源策略的好处：答案就是安全！简单的例子：比如一个黑客，它利用iframe把正真的银行登录页面嵌套他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了，后果是不是很严重。那么什么才是同源？
所谓同源是指域名，协议，端口距相容。
	同源的几种情况：
	1.不同域名属于跨域：如www.aa.com和www.bb.com,另外www.aa.com 和 www.aa.com.cn也属于不同域名；
	2.主域名和子域名（二级域名、三级域名等）跨域：如：www.aa.com,sub.aa.com;
	3.不同协议属于跨域：如http://www.aa.com 和 https://www.aa.com;
	4.不同端口：如： www.aa.com:90 和 www.aa.com:80;
	5.IP和域名属于跨域：123.123.103.16 和 www.baidu.com;

2、为什么要跨域？

	我们实际上做项目的时候，不可避免地根据项目需求进行跨域访问，子域和主域之间数据共享等，收到同源策略的影响，要满足这些需求，就要用跨域技术来实现。

3、跨域技术

	常用的跨域方式有：
	1.window.postMessage;
	2.window.name;
	3.jsonp;
	4.server-proxy;
	5.document.domain;
	6.fim;
	7.flash;
	
什么情况下才会出现跨域？
假设域名是：http://www.example.com.cn/ ；
如果所请求的域名跟这个域名不一致，这种情况就是跨域，由于跨域存在漏洞，所以一般来说正常的跨域请求方式是请求不到的。

1.window.name
	window对象的name是个很特别的属性，当该window的location变化重新加载后，它的name属性值依然保持不变，获取window.name需要在同域下进行。特点：安全，不会产生历史记录，传递数据受限制，最大为2MB。
	a.服务器返回：
	代码如下：
	<script>window.name='{"id":"3", "name":"leisure"}';</script> 
	b.定义一个iframe，添加onload事件 <iframe id="iframe1" onload="iLoad"><iframe> 
	<script type="text/javascript"> 
		var load = false; 
		function iLoad() { 
			if(load == false) { // 同域处理，请求后会再次重新加载iframe 
				document.getElementById('iframe1').contentWindow.location = '/';
				load = true; 
			} else {  // 获取window.name的内容，注意必须进行同域处理后方可访问！ 					  
					var data = document.getElementById('iframe1').contentWindow.name; 
					alert(data); // {"id":"3", "name":"leisure"} 
					load = false; 
			} 
		} 
</script> 
c.定义一个form，设置form的target为iframe的id；
	代码如下：
	<form action="url" method="POST" target="iframe1"> 
		<button type="submit" value="submit" /> 
	</form> 
2.jsonp
	jsonp是一个简单高效的跨域方式，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问。特点：不受同源策略的限制，兼容性更好，易于实现，只支持get。
	
	服务器返回callback（{"id":"3","name":"leisure"}）;
	代码如下：
	<script type="text/javascript"> 
		function callback(data) { 
			alert(data); 
		} 
	</script> 
	<script type="text/javascript" src="http://www.example.com.cn/product.jsp?id=5&jsonp=callback">  
	</script> 
3.flash跨域：
	服务器添加crossdomain.xml;
	http://www.example.com.cn/crossdomain.xml 
	代码如下：
	<?xml version="1.0"?> 
	<cross-domain-policy> 
	<allow-access-from domain="*.another.com.cn" /> 
	</cross-domain-policy>