跨域问题是开发过程中一个比较常见的问题，无论你是前台开发，还是后台开发，可能都处理过这个问题。本文主要是介绍跨域常用的解决方案。
什么是跨域？
假设有这么一个场景，我有一个网站，在里面有一个显示商品的功能，对应的页面地址是：
http://www.myexample.com/page/page-a.html
在实现这个页面时，我通过iframe集成了另外一个网站的商品展示功能，对应的页面地址是：
http://www.othersite.com/page/show.html
页面看起来可能是这样的，我简化了所有的内容，通过不同的背景色来区分不同的页面。
可以想象，我并没有做太多的开发，就拥有一个商品展示功能了。但是在page-a页面中，并不能通过Javascript来访问show页面的document、cookie等对象，不能修改show页面中的任何内容。代码看起来是这样的，运行的时候会产生错误：
document.getElementById("iframe").contentWindow.document;
// Uncaught DOMException: Blocked a frame from accessing a cross-origin frame.
为什么这样设计？
我们反过来思考，如果可以访问document、cookie，会出现什么问题？
可以通过Javascript来监听show页面上的输入框，可以改变表单提交的URL。在myexample这个网站就可以做任何事情了，截获用户的敏感数据了，比如登录信息、个人喜好等数据。结果就是，在你访问一个网站的时候，你的数据很容易就被泄露了，包括用户名和密码。
所以，简单地说就是安全，在WWW创立之初，设计者就考虑到了这个问题，通过一些策略来保证用户信息的安全，防止恶意的网站窃取数据。
A web browser permits scripts contained in a first web page to access data in a second web page, but only if both web pages have the same origin. An origin is defined as a combination of URI scheme, hostname, and port number.
这个叫同源策略（wiki），所有的浏览器都支持这个安全策略。从上面的定义来看，同源指的是三个相同：
1、协议（scheme）相同
2、域名（hostname）相同
3、端口（port）相同
这里又要引入一个新的概念：
URI（wiki）
Uniform Resource Identifier (URI) is a string of characters used to identify a resource.
具体的语法如下图所示：
同源概念中的scheme、host、port对应到上图中的结构，回到我们刚才的例子：
http://www.myexample.com/page/page.html
1、scheme是http
2、host是www.myexample.com
3、port没有表示是80
这样就很容易理解了，跨域就是不同源，两个不同源的网站相互会被限制，限制有三种：
1、Cookie、LocalStorage 和 IndexDB 无法读取。
2、DOM无法获得。
3、AJAX请求不能发送。
前端解决方案
1、修改Domain
浏览器允许通过设置document.domain共享 Cookie，相当于是把两个不同源的页面设置成相同的源，这种方法只适用于 Cookie 和 iframe 窗口，而且要求两个网页一级域名相同，只是二级域名不同。
document.domain='example.com';
2、window通信
这个方案简单的说，就是通过DOM的window对象来传递参数。阮一峰老师总结了三点，非常清晰，我就不重复的去写了：
片段标识符（fragment identifier）
window.name
跨文档通信 API（Cross-document messaging）
详情见：参考资料4
3、JSONP
在一个页面中，可以使用