什么叫同源

协议域名端口号三者相同则为同源。拿 http://www.baidu.com 举例：

• https://www.baidu.com 不同源，协议不同、端口号不同（ http 默认端口号为 80，https 默认端口号为 443 ）
• http://baidu.com 不同源，域名不同
• http://www.baidu.com:81 不同源，端口号不同( http 协议默认端口号为 80)
• http://www.baidu.com/index 同源，后面的 /index 是域名下的文件夹，不作为同源判断依据

什么是同源策略

1995 年，同源策略由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个策略。
浏览器的同源策略实际是想要限制两个不同源的网站交互。它想要达成的目标是：在用户访问恶意网站的时候，这个恶意网站无法影响到用户与正常网站之间的交互。
为了遵循同源策略衍生出来了三种不同的限制：

• 限制不同源的网站读取 Cookie, LocalStorage, indexDB
• 限制不同源的网站读取 DOM
• 限制不同源的网站发送 AJAX 请求

但由于万维网的诞生就是为了做资源的链接共享，所以完全限制两个网站之间的交互是不现实的，因此浏览器的目标是控制这个交互的受控。所以我们可以看到，浏览器的同源策略不针对一些纯粹的对资源的操作，比如 img、link、script 等标签的资源引进操作，比如 a 标签的点击跳转。另外，对于 form 表单的提交，同源策略同样不做限制，同源策略只针对读操作，也因此对于 ajax 请求，其实是能够正常发送的，但是浏览器阻止了资源的接收。对于这一点，可以通过自己建一个简单的服务器，接收到请求的时候在服务器端打印 log 来做验证。这里是我建的简单的 nodejs 服务器 。
对于同源策略限制的以上三点，单独分析的话：

• 浏览器本地保存了用户的隐私信息，假设恶意网站能够随意读取其他网站的 Cookie 的话，就可以模仿用户登录进而拿到用户的隐私信息。
• 限制不同源的网站读取 DOM 主要是为了防止恶意网站通过 iframe 调用被攻击网站，等到用户在 iframe 里输入了用户名和密码之后，恶意网站再拿到 iframe 的 DOM 节点中输入的用户名密码，从而获取用户的隐私信息。
• ajax 请求的限制源于它的自由度，它可以支持任意请求的发送，也可以拿到网站的响应信息。如果不限制 ajax 的话，那么用户在登录了 A 网站后，再进入 B 网站，B 网站虽然不能直接拿到 A 网站的 Cookie，但是在它向 A 网站发送请求的时候，会携带 A 网站的 Cookie，免除了登录步骤。B 网站就可以通过这种方法拿到 A 网站的用户隐私信息。

规避同源的方法

同源策略对不同源的网站之间的通信做出了诸多的限制，但实际使用中又存在需要跨域的情况，因此就有了“规避同源的方法”这个需求。在这个基础上，一方面是开发者通过一些“特性”来规避同源策略，另一方面 W3C 也提供了一些方法来做不同源之间的通信。这里列举一部分。

JSONP

jsonp 利用 script 标签不受同源策略限制的漏洞，通过动态创建 script 标签，并把 src 指向目标地址的方式发送请求，通过服务器调用 callback 来获取响应。
具体实现 点这里

window.postMessage

HTML5 引入了跨文档通信 API，A 网站通过 window.postMessage('message', 'http://B.com') 向 B 网站发送请求，B 网站通过监听 message 事件来拿到消息。

CORS

跨域资源共享是 W3C 提供的一种解决 AJAX 跨域问题的方法，通过设置 HTTP 响应头 Access-Control-Allow-Origin 来指定哪些源可以对该资源进行跨域访问来解决同源问题。相当于告诉浏览器这个来源是自己人，可以让它进行访问。这其实在一方面印证了上面所说的，浏览器并不限制 ajax 请求的发送，它限制的是响应的读取。
CORS 相关的详细可访问阮一峰老师的这篇文章来查看。

nginx 反向代理

nginx 是利用反向代理对同源策略的一种规避。
首先了解一下什么是代理，试想一个场景：用户想要访问 google.com ，但是因为安全上网策略无法访问，所以挂了个代理，代理拦截了用户发的请求，然后转发给 google.com，google.com 发送响应给代理服务器，接着代理服务器又返回给用户，这就完成一次正向代理的过程。正向代理其实是，我知道我要去 A 商店买东西，但是我找不到路，那么正向代理拿着我的钱去了 A 商店，然后又把货物给我运了回来。
而反向代理则是，我想要买东西，但是我不在乎去哪里买，我只要找到这个反向代理，把钱给他，然后让他把货物给我。
因为同源策略限制的只是不同源的网站之间的交互，服务器向服务器发请求，这个过程是不受同源策略限制的。所以 nginx 做的操作是：它把 origin 设置为和网站一致，然后接收网站发来的请求，再去向服务器发请求，拿到服务器的响应后，又把响应返回给网站。

参考资料

MDN 浏览器的同源策略
阮一峰 浏览器同源政策及其规避方法
JavaScript GuideBook
W3C same origin policy
浏览器安全手册
同源策略草案
同源策略的分析随笔