跨域

什么是同源策略？

同源策略是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略。这种策略只是一个规范，并不是强制要求，各大厂商的浏览器只是针对同源策略的一种实现。它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。

同源是指：

同协议：都是http或者https
同域名：都是http://jirengu.com/a 和http://jirengu.com/b
同端口：都是80端口

为什么要有同源限制？

如果没有同源策略黑客很容易窃取密码与用户信息。
浏览器出于安全方面的考虑，只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。

什么是跨域？

跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。
跨域的严格一点的定义是：只要协议，域名，端口有任何一个的不同，就被当作是跨域。

同源：
http://jirengu.com/a/b.js 和 http://jirengu.com/index.php
不同源：
http://jirengu.com/main.js 和 https://jirengu.com/a.php (协议不同)
http://jirengu.com/main.js 和 http://bbs.jirengu.com/a.php (域名不同，域名必须完全相同才可以)
http://jiengu.com/main.js 和 http://jirengu.com:8080/a.php (端口不同,第一个是80)

c.png

注意: 对于当前页面来说页面存放的 JS 文件的域不重要，重要的是加载该 JS 页面所在什么域

跨域的几种实现方法：

jsonp
CORS：跨域资源共享（Cross-Origin Resource Sharing）
降域
postMessage()

JSONP原理

利用
并提供一个回调函数来接收数据（函数名可约定，或通过地址参数传递）。
第三方产生的响应为json数据的包装（故称之为jsonp，即json padding），形如：
callback({"name":"hax","gender":"Male"})
这样浏览器会调用callback函数，并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。

CORS是什么？

CORS 全称是跨域资源共享（Cross-Origin Resource Sharing），是一种 ajax 跨域请求资源的方式。
IE支持10以上。当你使用 XMLHttpRequest 发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin; 浏览器判断该相应头中是否包含 Origin 的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。

例如：

在后台设置响应头，同意http://a.com:8080源来请求数据
res.setHeader('Access-Control-Allow-Origin','http://a.com:8080')

a.com的请求头会带上自己的源
Origin: http://a.com:8080

如果匹配则可以共享资源

降域

当两个页面不同域，但是它们的父域之上都相同(端口)，那么可以使用降域的方法来实现跨域。
对于主域相同而子域不同的情况下，可以通过设置 document.domain 的办法来解决。

document.domain = "jrg.com"

两个页面的域名后缀都要添加http://jrg.com，把两个网页都降到同一个组域下，这样就可以访问了。

postMessage

window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。
需要在全局的代码中添加
window.frames[0].postMessage(this.value,'*');
而在需要访问数据的网页中用来监听postMessage

例如：

创建a.html


    使用postMessage实现跨域

创建b.html

以上是我对跨域的理解，有不足之处请多见谅

跨域