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/…