CORS 跨域, 也许这篇就够了

CORS前奏

了解CORS跨域以前，也许咱们还应该对跨域这么个东东的一些概念要有些了解。

1. 什么是跨域

广义上的跨域是指一个 域下的文档或脚本试图去请求另外一个域下的资源。好比： 资源跳转（a连接）、资源嵌入（link, script）、脚本请求（js发起ajax请求）等。而咱们一般所讨论的跨域是指的是狭义上的跨域，指的是由浏览器同源策略限制的一类请求场景。那么什么是同源策略，同源策略又限制了什么。

2. 什么是同源策略

同源指的是若是两个页面的协议，端口和域名都相同，则两个页面具备相同的源，只要其中之一不一样，则那这两个源就不相同。

3. 同源策略限制了什么

• Cookie、LocalStorage 和 IndexDB 没法读取。
• DOM 没法得到(内嵌iframe中，父子页面不能获取DOM)。
• AJAX 请求不能发送。

4. 为何有同源策略的限制

同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。

1. Cookie、LocalStorage 和 IndexDB 没法读取限制。（缘由好比：访问一个恶意网站，获取到全部网站下的cookie信息， 若是有某个已登陆的网站， 登陆验证放在cookie里， 那就能够假装你的身份去访问该 网站。）
2. DOM 没法得到(内嵌iframe中，父子页面不能获取DOM)。（缘由好比：一个恶意 网站，iframe嵌入一个正规网站的， 这样就能够获取到用户的登陆信息和密码。 ）
3. AJAX 请求不能发送。 （缘由好比： 没限制直接就能够用脚本把服务器给打爆了。）

5. 解决跨域的方法

• JSONP
• location.hash
• document.domain
• window.name
• window.postMessage
• WebSocket
• CORS 接下来要重点讨论下的是CORS是如何解决ajax请求跨域的。

CORS正文

CORS(跨域资源共享)是一种机制，容许 Web 应用服务器进行跨域访问控制，从而使跨域数据传输得以安全进行。CORS的使用要浏览器和服务端同时支持，并配合使用， IE要大于10。

1. 怎么工做的

js中进行一个跨域的ajax请求，浏览器判断该请求是简单请求仍是复杂请求，简单请求就直接发送， 复杂请求就先发送一次预检请求， 预检请求成功后， 再发送完整的请求， 整个过程对用户是无感知的。那么什么是简单请求和复杂请求呢？

2. CORS的简单请求和复杂请求

简单请求须要同时知足如下两个条件：

• 请求是如下方法之一： GET、HEAD、POST
• 不得人为设置如下集合以外的其余首部字段：

Accept
Accept-Language
Content-Language
Content-Type （须要注意额外的限制）：
（text/plain
multipart/form-data
application/x-www-form-urlencoded）
复制代码

非简单请求就认为是复杂请求（好比PUT、DELETE请求， content-type设置为appliction/json等）， 就须要发送预检请求。

3. CORS是如何工做的（如何肯定是否容许跨域）

肯定是否容许跨域就须要浏览器和服务器共同协做完成，主要就是经过特定的一些响应头来完成。预检请求还须要有特定的请求头。那么特定请求头分别有哪些以及是如何配合使用的。

######a. 服务端响应头

• Access-Control-Allow-Origin：这个字段是必须的，表明的是容许跨域的源， '*'表明任意的源。
• Access-Control-Allow-Methods： 这个字段也是必须的， 表明容许跨域的http请求方法。
• Access-Control-Allow-Credentials： 非必须的， 表示是否容许发送cookie， 默认是false，若是设置为true则同时还须要客户端要设置xhr.withCredentials = true才能起做用， 二者是共存的(其中的cookie带的是目标域的cookie)。
• Access-Control-Allow-Headers： 非必须的，表示容许的请求头， 若是预检请求中包括了Access-Control-Request-Headers， 则服务端必须设置该字段。
• Access-Control-Max-Age：非必须的，用来指定本次预检请求的有效期，单位为秒。即将CORS的响应配置缓存在浏览器端， 在缓存生效时间内，下次请求不用发送预检请求。 须要注意的是： 浏览器的disable-cache要关掉
• Access-Control-Expose-Headers：可选字段， 客户端只能根据响应获取到如下的响应头：

Cache-Control
Content-Language
Content-Type
Expires
Last-Modified
Pragma
复制代码

若是想要获取额外的响应头信息， 则须要将其设置在这个字段中。

b. 客户端预检请求头

• Access-Control-Request-Method： 该字段是必须的，用来表示览器的CORS请求会用到哪一个HTTP方法。
• Access-Control-Request-Headers： 该字段是非必须的，指定浏览器CORS请求额外发送的头信息字段。

针对简单请求状况：

不会发送预检请求， 直接是发起真正的请求，只要 Access-Control-Allow-Origin与Access-Control-Allow-Methods正确的设置就能发起请求。

具体的coding例子：github传送门

后记： 若是看完这篇还没理解，那就。。。再多看几遍（逃。。。），根据demo折腾下。

参考文章：

1. www.ruanyifeng.com/blog/2016/0…
2. www.html5rocks.com/en/tutorial…
3. developer.mozilla.org/zh-CN/docs/…
4. developer.mozilla.org/zh-CN/docs/…
5. github.com/hijiangtao/…