##1. 什么是跨域（Cross-site)？
想了解跨域，必须先了解一下“同源策略(same origin policy)”。

1.1 同源策略

它限制了某个域下的文档或者js与另一个域中的资源交互的方式，它提供了一种安全机制，这种安全机制可以避免来自恶意网站的攻击。 同源策略要求浏览器允许来自某个网页上的js请求来自另一个网页的数据，当且仅当两个页面来自相同的域。

1.2 什么是域(origin)？

域是由三部分组合而成：URI Schema（协议类型），host name（域名）,port number（端口号）
举个例子：
1） http://www.domain.com 这个页面，URI Schema是http,host name是www.domain.com,port number是默认的80
2） https://www.xxx.com:8080/xxx/yyy URI Schema是https，hostname是www.xxx.com，port number是8080
由于1）和2）中的三部分都不相同，所以它们就是不同的域。 下面的图更好的解释了什么是同域：

PS:IE浏览器里可能不太一样，它不会把端口号作为判断依据。

1.3 为什么要有同源策略？

提出同源策略的目的是出于安全性考虑，它能够阻止来自恶意网站的脚本通过其他网站的DOM获取其他网站的信息。可以避免CSRF和XSS攻击。

1.4 同源策略是限制谁的？

1） 很多人可能搞不清楚这个问题，同源策略限制的是浏览器或者其他提供类似浏览器服务的软件，而且这仅仅是个规范，所以浏览器是否遵守这个规范也不一定，所以就会有上面的IE浏览器判断是否同源的时候并没有考虑端口号的问题。 2） 同源策略限制的是js，而图片，css这些是不存在同源策略限制的。

1.5 什么是跨域？

在某个网站的页面上通过js请求另外一个网站的数据，如果两个网站不满足同源策略，那么就存在跨域问题。

2. 为什么会有跨域问题？

由于在实际环境中，经常需要通过js获取一些数据，特别是ajax的流行，通过ajax加载某个网站的数据的场景就会经常遇到，而一旦有这样的需求，就可能会出现跨域的问题。

3. 如何判断我是否遇到了跨域问题？

一般来讲，如果你的请求被同源策略限制，浏览器的开发工具都会给出错误提示，在Chrome浏览器的console中，可能会有类似下面的提示：

4.如何解决跨域问题？

一般的思路是：通过一些妥协调整，绕过同源策略的限制。下面是我最近了解的一些方法。
为方便讲解，这里先举一个例子：
客户端采用H5开发，所有的数据都通过ajax请求从服务端获取。
客户端的页面都存放在静态文件服务器中，域名是http://static.demo.com
服务端提供接口供客户端调用，接口的参数和返回值都是JSON格式，服务端的域名是:http://server.demo.com。
如果不考虑跨域的问题，客户端与服务端的交互方式如下：
1.客户端post请求服务端，参数：｛"key":"value"｝
2.服务端返回结果：{"code"：1，"data":"success"}

4.1 Jsonp方式

原理： 通过在页面中新增一个