同源策略

概念

同源策略 源是由协议，主机名，端口组成
不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以xyz.com下的js脚本采用ajax读取abc.com里面的文件数据是会被拒绝的。

规避

跨域资源共享
这种方式使用了一个新的Origin请求头和一个新的Access-Control-Allow-Origin响应头扩展了HTTP。允许服务端设置Access-Control-Allow-Origin头标识哪些站点可以请求文件，或者设置Access-Control-Allow-Origin头为"*"，允许任意站点访问文件。浏览器，例如Firefox3.5，Safari4，IE10使用这个头允许跨域HTTP请求。
JSONP

就是利用<script>标签没有跨域限制的“漏洞”（历史遗迹啊）来达到与第三方通讯的目的。
当需要通讯时，本站脚本创建一个<script>元素，地址指向第三方的API网址，形如： <script src="http://www.example.net/api?param1=1&param2=2"></script> 并提供一个回调函数来接收数据（函数名可约定，或通过地址参数传递）。
第三方产生的响应为json数据的包装（故称之为jsonp，即json padding），形如： callback({"name":"hax","gender":"Male"})这样浏览器会调用callback函数，并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。

JSONP的安全隐患
（1）任意网站只要通过jsonp方式就可以跨域访问目标域名下的信息，解决办法：在跨域请求数据时在参数中加上与目标域名约定好的一个token变量，这样其他网站访问该域名时，目的网站通过辨认这个约定好的信息而决定是否可以被跨域访问。
（2）不能用post方法获取数据，由于基于src地址引用方式，在地址中附带参数信息，因此只能用get方式获取信息
（3）callback方法由于是根据用户需求自己实现的，可能会被恶意注入脚本，获取隐私信息。

跨文档通信 postMessage
html5引入了一个跨文档通信的API，这个API为window对象新增了一个window.postMessage方法，允许跨窗口通信，不论这两个窗口是否同源。

该方法只解决了前端两个窗口的通信，但无法解决前后台调用的跨域问题。

参考：https://www.jianshu.com/p/beb059c43a8b