同源策略
在说跨域之前，先来了解一下“同源策略”
什么是源？
源=协议+域名+端口号。
如果两个url的协议、域名、端口号完全一致，那么这两个url就是同源的。
我们可以通过window.origin或location.origin得到当前源。
什么是同源策略？
同源策略：不同源之间的页面不能互相访问数据。
浏览器规定：如果JS运行在源A里，那么就只能获取源A的数据，不能获取 源B的数据，即不允许跨域
假设 wang.com/index.html引用了ergou.com/1.js,那么就说1.js运行在源wang.com里
注意，这和ergou.com没有关系，虽然1.js是从它那里下载的.
所以1.js就只能获取wang.com的数据,这就是浏览器的功能，浏览器就是故意这样设计的。
为什么会有同源策略？
之所以需要使用同源策略就是为了保护用户的隐私。
以微信为例，源为 https://user.weixin.com，假设当前用户已经登录，并且AJAX请求 /friends.json 可以获取用户好友列表。
这个时候黑客来了，他把 https://user-winxin.com分享给你，实际上这是一个钓鱼网站，你点开这个网页，这个网页也请求你的好友列表 https://user.weixin.com/friends.json。
请问，这个时候你的好友列表是不是就被黑客给偷走了？
问题的根源？
之所以会出现这个问题，其根源就在于无法区分发送者。
微信里面的JS和黑客里面的JS请求几乎没有区别（referer区别）
但是如果后台开发者没有检查referer，那么就完全没有区别。
所以如果没有同源策略，任何页面都能偷走微信里面的数据，甚至是支付宝里面的金额都会被窃取走
安全原则
有的小伙伴可能还会问，既然referer有区别，那检车referer不就好了吗？
**安全原则：**安全链上的强度取决于安全链上最弱的一环，但是这对后端人员的开发有要求，所以浏览器应该主动预防这种偷数据的行为，总之为了保护隐私浏览器设置了严格的同源策略，如果浏览器不限制跨域，一定是这个浏览器出现了 bug
跨域
什么是跨域？
跨域就是浏览器视图执行其他网站的脚本，但是由于同源策略的限制，导致我们无法实现跨域
关于跨域的几个问题？
为什么a.wang.com访问wang.com也算跨域？
因为历史上，出现过不同的公司共用域名，a.wang.com和wang.com不一定是同一个网站，浏览器谨慎起见，认为这是不同的源。
为什么不同端口也算跨域？
原因同上，一个端口一个公司的情况也不是没有的。
记住：安全链条的强度取决于最弱的一环，所有和安全相关的问题都要谨慎对待。
为什么两个网站的IP一样，也算跨域？
原因同上，因为IP也是可以共用的。
为什么可以跨域使用CSS、JS和图片等？
同源策略限制的是数据访问，我们引用css、js和图片的时候，其实并不知道其内容，我们只是在引用。
CORS跨域
什么是CROS跨域？
CROS的全称是“跨域资源共享”，它允许浏览器向跨源服务器发出XMLHttpRequest请求，从而克服了Ajax只能同源使用的限制。
如何理解CORS?
如果wang.com和ergou.com这两个网站都是我的，我就是想让wang.com去访问ergou.com里面的数据应该怎么办呢？
只需要在wang.com的响应头里面ergou.com就可以访问，这就时CORS,实现CORS通信的关键就是服务器，只要服务器实现了CORS接口就可以跨源通信。
两种请求
CORS跨域分为两种请求，一种是简单请求，一种是复杂请求
简单请求
只要满足以下条件就是简单请求：
- 请求方式为HEAD、post或者get
- http头信息不超出以下字段：Accept、Accept-language、Content-Language、Last-Event-ID、 Content-Type(限于三个值：application/x-www-form-urlencoded、multipart/form-data、text/plain)
简单请求的实现就是在信息头当中加入Origin字段：
Origin的作用就是本次请求来自哪个源，服务器会根据Origin的值来判断是否接受本次请求
如果Origin所表示的源不被服务器接受的话，即浏览器发现回应的信息头中没有Access-Control-Allow-Origin字段，会自动抛出一个错误
注意：这种错误是无法通过状态码来识别的，这就是CORS实现跨域请求的一个弊端。
如果Origin所表示的源被服务器端所接受，那么服务器端就会做如下响应：
Access-Control-Allow-Origin :该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求
Access-Control-Allow-Credentials: 该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。(注意：如果要发送cookie，不仅要进行上述的设置，还要在AJAX请求中设置withCredentials属性）
Access-Control-Expose-Headers:该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。
复杂请求
所谓复杂请求，就是不满足上述条件的请求就是复杂请求。
比如请求方法是PUT和DELETE,或者content-type字段的类型是application/json
复杂请求首先会发出一个预检请求，该请求时option方法的，通过该请求来知道服务端是否允许跨域请求。
上面的请求就是一个复杂去请求，当浏览器发现这是一个复杂请求之后，就会主动发出一个预检请求，询问服务器是否允许本次请求。
服务器收到预检请求之后，检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，确认允许跨源请求，才会做出相应的回应。
CORS存在的问题
不支持IE8/9,如果要在IE8/9中跨域需要加上XDomainRequest对象来支持CORS
JSONP跨域
我们在跨域的时候由于当前浏览器不支持CORS或者因为某些条件不支持CORS,我们必须使用另外一种方式来跨域，于是我们就请求一个JS文件，这个文件会执行一个回调，回调里面就有我们需要的数据。jsonp的核心就是利用script标签向非同源服务器发送请求的特性，在服务器端返回函数的调用
动态发送请求：
回调函数的名字是什么？
回调函数名字可以随机生成的一个随机数，我们把名字当成callback的参数传递给后台，后台会把这个函数再次返回给我们并执行
JSONP跨域优点
兼容ie
可以跨域
JSONP跨域缺点
- 由于是script标签，所以读不到ajax那么精确的状态，不知道状态码是什么，也不知道响应头是什么，它只知道成功和失败
- 不支持post（因为是script标签，所以只支持get请求）