什么是同源策略？
同源策略 是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略。这种策略只是一个规范，并不是强制要求，各大厂商的浏览器只是针对同源策略的一种实现。它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。
同源是指：
同协议：都是http或者https
同端口：都是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原理
利用<script>标签没有跨域限制来达到与第三方通讯的目的。当需要通讯时，本站脚本创建一个<script>元素，地址指向第三方的API网址，形如：
<script src="http://www.example.net/api?param1=1¶m2=2"></script>
并提供一个回调函数来接收数据（函数名可约定，或通过地址参数传递）。
第三方产生的响应为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
<div class="ct">
<h1>使用postMessage实现跨域</h1>
<div class="main">
<input type="text" placeholder="http://a.jrg.com:8080/a.html">
</div>
<iframe src="http://localhost:8080/b.html" frameborder="0" ></iframe>
</div>
<script>
//URL: http://a.jrg.com:8080/a.html
$('.main input').addEventListener('input', function(){
console.log(this.value);
window.frames[0].postMessage(this.value,'*'); //* ,任何域下都可接受请求
})
window.addEventListener('message',function(e) {
$('.main input').value = e.data
console.log(e.data);
});
function $(id){
return document.querySelector(id);
}
</script>
创建b.html
<input id="input" type="text" placeholder="http://b.jrg.com:8080/b.html">
<script>
// URL: http://b.jrg.com:8080/b.html
$('#input').addEventListener('input', function(){
window.parent.postMessage(this.value, '*');
})
window.addEventListener('message',function(e) {
$('#input').value = e.data
console.log(e.data);
});
function $(id){
return document.querySelector(id);
}
</script>
以上是我对跨域的理解，有不足之处请多见谅
