跨域资源共享（CORS）

---

由于浏览器的同源策略，跨域成为前端开发过程中一个不能绕过的部分，常用的跨域方法有 JSONP，CORS等

---

概述

目前，所有浏览器的最新版本都支持 CORS，IE不能低于IE10，移动端开发更适用一点。
CORS的实现方面，浏览器会自动检测跨域AJAX，所以前端方面并不需要多做些什么。CORS的实现主要在于服务端是否实现了 CORS接口。

---

CORS的具体实现

CORS请求分为两大类，简单请求和非简单请求，浏览器对这两种请求的处理方法不一样

1.简单请求

当AJAX请求满足以下方法时称之为简单请求：

• 请求方法为 GET/HEAD/POST
• 请求头首部字段为以下的子集
  Accept Accept-Language Content-Language Content-Type
  其中 Content-Type的值只能为 application/x-www-form-urlencoded，multipart/form-data，text/plain

对于简单请求，CORS的处理方式如下：

• 在简单请求AJAX首部添加字段 Origin，Origin字段的值为本次发送AJAX的源（协议+域名+端口）。然后服务器根据这个值决定是否允许跨域。
• 如果服务器不允许跨域，会返回一个不包含 Access-Control-Allow-Origin 字段的正常的HTTP响应，浏览器收到响应后抛出错误，被XMLHttpRequest捕获
• 如果服务器允许跨域，响应头中会多出几个字段，分别是：
  1. Access-Control-Allow-Origin ：表示的是服务器允许接受跨域的来源 url
  2. Access-Control-Allow-Credentials: 表示是否允许发送 Cookie，如果为 true表示允许，其他情况则不允许
  3. Access-Control-Expose-Headers: 表示客户端XMLHttpRequest除开基本字段外能够拿到的头字段。
     基本字段包括：Cache-Control，Content-Language，Content-Type，Expires，Last-Modified，Prama
• 如果客户端需要发送Cookie，则需要设置 withCredentials为 true，否则就算服务器允许发送 Cookie，浏览器也不会发送
  xhr.withCredentials = true

2.非简单请求

不能满足简单请求的情况一般都为非简单请求，此时应先发送预检请求，待请求通过后，再发送正式的请求

• 预检请求的请求方式为 OPTIONS，携带有两个字段，一个是正式请求的发送方式 Access-Control-Request-Method: PUT，另一个是正式请求的携带的额外头部 Access-Control-Request-Headers: X-PINGOTHER
• 预检请求发送后，服务器会返回响应，如果服务器同意跨域，则会返回带有 Access-Control-Allow-Origin头部的响应。如果服务器否定跨域，则会返回一个正常的响应，但是没有 CORS有关的任何头部字段，此时触发错误，而XMLHttpRequest会捕获传递给回调方法
• 如果服务器同意跨域，则返回的响应中包含以下几个字段
  Access-Control-Allow-Origin: *
  Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
  Access-Control-Allow-Methods: POST, GET, OPTIONS
  Access-Control-Allow-Credentials: true
  Access-Control-Max-Age: 86400

Access-Control-Allow-Origin, Access-Control-Allow-Credentials和简单请求一样，分别是允许跨域的来源地址和允许发送 Cookie
Access-Control-Allow-Headers 表示服务器能够接受的额外的请求头，这里服务器会把所有能接受的请求头都返回，再次发送请求时则无需再验证
Access-Control-Allow-Methods 表示服务器能够接受的请求方式，同样，这里也会把所有能接受的请求方式都返回
Access-Control-Max-Age 表示此次预检的有效期，在有效期内再次发送非简单请求则无需再发送预检
同时，浏览器内部维护了一个预检的最大有效期，如果 Access-Control-Max-Age的有效期时间大于浏览器内部的有效期时间，则以浏览器内部有效期时间为准