阅读目录
- 什么是跨域
- 常用的几种跨域处理方法：
- 跨域的原理解析及实现方法
- 总结
摘要：跨域问题，无论是面试还是平时的工作中，都会遇到，本文总结处理跨域问题的几种方法以及其原理，也让自己搞懂这方面的知识，走起。
什么是跨域
在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的文档在同一域下的内容。
JavaScript这个安全策略在进行多iframe或多窗口编程、以及Ajax编程时显得尤为重要。根据这个策略，在baidu.com下的页面中包含的JavaScript代码，不能访问在google.com域名下的页面内容；甚至不同的子域名之间的页面也不能通过JavaScript代码互相访问。对于Ajax的影响在于，通过XMLHttpRequest实现的Ajax请求，不能向不同的域提交请求，例如，在abc.example.com下的页面，不能向def.example.com提交Ajax请求，等等。
为什么浏览器要实现同源限制?我们举例说明:
比如一个黑客,他利用iframe把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名和密码登录时,如果没有同源限制,他的页面就可以通过javascript读取到你的表单中输入的内容,这样用户名和密码就轻松到手了.
又比如你登录了OSC,同时浏览了恶意网站,如果没有同源限制,该恶意 网站就可以构造AJAX请求频繁在OSC发广告帖.
跨域的情况分为以下几种：
特别注意两点：
1、如果是协议和端口造成的跨域问题“前台”是无能为力的
2、在跨域问题上，域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。比如上面的，http://www.a.com/a.js和http://70.32.92.74/b.js。虽然域名和域名的ip对应，不过还是被认为是跨域。
“URL的首部”指window.location.protocol +window.location.host。其中，
window.location.protocol：指含有URL第一部分的字符串,如http:
window.location.host：指包含有URL中主机名:端口号部分的字符串.如//www.cenpok.net/server/
常用的几种跨域处理方法：
1、JSONP
2、CORS策略
3、document.domain+iframe的设置
4、HTML5的postMessage
5、使用window.name来进行跨域
跨域的原理解析及实现方法
1、JSONP（JSON with padding）
原理 ：
我们知道，在页面上有三种资源是可以与页面本身不同源的。它们是：js脚本，css样式文件，图片，像淘宝等大型网站，肯定会将这些静态资源放入cdn中，然后在页面上连接，如下所示，所以它们是可以链接访问到不同源的资源的。
1）<script type="text/javascript" src="某某cdn地址" ></script>
2）<link type="text/css" rel="stylesheet" href="某个cdn地址" />
3）<img src="某个cdn地址" alt=""/>
而jsonp就是利用了script标签的src属性是没有跨域的限制的，从而达到跨域访问的目的。因此它的最基本原理就是：动态添加一个<script>标签来实现。
实现方法：
这里是使用ajax来请求的，看起来和ajax没啥区别，其实还是有区别的。
ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。
$.ajax({
url:"http://crossdomain.com/services.php",
dataType:'jsonp',
data:'',
jsonp:'callback',
success:function(result) {
// some code
}
});
</div>
上面的代码中，callback是必须的，callback是什么值要跟后台拿。获取到的jsonp数据格式如下：
flightHandler({
"code": "CA1998",
"price": 1780,
"tickets": 5
});
</div>
jsonp的全称为json with padding，上面的数据中，flightHandler就是那个padding.
JSONP的不足之处：
1、只能使用get方法，不能使用post方法：
我们知道 script，link, img 等等标签引入外部资源，都是 get 请求的，那么就决定了 jsonp 一定是 get 的。但有时候我们使用的 post 请求也成功，为啥呢？这是因为当我们指定dataType:'jsonp',不论你指定：type:"post" 或者type:"get"，其实质上进行的都是 get 请求！
2、没有关于 JSONP 调用的错误处理。如果动态脚本插入有效，就执行调用；如果无效，就静默失败。失败是没有任何提示的。例如，不能从服务器捕捉到 404 错误，也不能取消或重新开始请求。不过，等待一段时间还没有响应的话，就不用理它了。
2、CORS策略
原理：
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。它为Web服务器定义了一种方式，允许网页从不同的域访问其资源.
CORS系统定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。 它是一个妥协，有更大的灵活性，但比起简单地允许所有这些的要求来说更加安全。
实现方法：
CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
前端方面
以前我们使用Ajax，代码类似于如下的方式：
var xhr = new XMLHttpRequest();
xhr.open("GET", "/hfahe", true);
xhr.send();
// 这里的“/hfahe”是本域的相对路径。
</div>
如果我们要使用CORS，相关Ajax代码可能如下所示：
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://blog.csdn.net/hfahe", true);
xhr.send();
// 请注意，代码与之前的区别就在于相对路径换成了其他域的绝对路径，也就是你要跨域访问的接口地址。
</div>
服务器方面
服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。
CORS策略的优缺点：
优点：
1、CORS支持所有类型的HTTP请求。
2、 使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。
缺点： 兼容性方面相对差一点，ie10或以上才支持
3、document.domain+iframe的设置 (只有在主域相同的时候才能使用该方法)
原理：
浏览器中不同域的框架之间是不能进行js的交互操作的。但是不同的框架之间（父子或同辈），是能够获取到彼此的window对象的，但是，我们也只能获取到一个几乎
无用的window对象。比如，有一个页面，它的地址是 http://www.example.com/a.html ， 在这个页面里面有一个iframe，它的src是 http://example.com/b.html , 很显然，这
个页面与它里面的iframe框架是不同域的，所以我们是无法通过在页面中书写js代码来获取iframe中的东西的。
这个时候，document.domain就可以派上用场了，我们只要把 http://www.example.com/a.html 和 http://example.com/b.html 这两个页面的document.domain都设成
相同的域名就可以了。但要注意的是，document.doma