cors

一.cors简介

概念:CORS需要浏览器和服务器同时支持.整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
cors跨域分为两种,1:简单请求;2:非简单请求
同时满足两个条件就是简单请求:

1:请求方法:head get post三种其一

2:http的头信息不超过以下几种字段:

accept
accept-language
content-language
last-event-id
content-type:application/x-www-form-urlencoded,multipart/form-data,text-plain

二.cors流程

1.简单请求

origin字段:
浏览器直接发出cors简单请求,在头信息中,增加一个origin字段,服务器根据这个值决定是否同意这次请求.如果origin指定的源不在许可范围内,服务器也会返回正常http回应(测试结果发现返回值是200),浏览器发现返回的头信息中没有包含Access-Control-Allow-Origin字段,就会抛出一个错误,被XMLHttpRequest的onerror回调函数捕获,在控制台显示.如果origin指定的域名在许可范围内,服务器返回就会多出Access-Control-Allow-Origin字段.

Access-Control-Allow-Origin:这个字段要么是一个确切的域名和端口(没有端口默认是80),表明只接受这个域名的跨域请求,要么是'*',表明接受任意域名的请求.

Access-Control-Allow-Credentials:表示请求是否允许发送cookie.如果要发送cookie到服务器,要在服务器端设置Access-Control-Allow-Credentials:true,另外,还要打开xhr对象的withCredentials属性xhr.withCredentials=true.需要注意的是,设置Access-Control-Allow-Credentials:true后,Access-Control-Allow-Origin不能设置为'*',必须指定明确的域名.同时,cookie仍然遵循同源策略,只有用服务器域名设置的cookie才会上传,其他域名的cookie并不会上传,且原网页代码中的document.cookie也不能读取服务器域名下的cookie.

2.非简单请求

非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json
非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。
浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。
"预检"请求用的请求方法是OPTIONS，表示这个请求是用来询问的。头信息里面，关键字段是Origin，表示请求来自哪个源。
除了Origin字段，"预检"请求的头信息包括两个特殊字段。
（1）Access-Control-Request-Method
该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法
（2）Access-Control-Request-Headers
该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段

ajax({
    url: url,
    params: {},
    method: 'get',
    contentType: 'application/json',
    success: function () {
         console.log(123)
    }
})

预检请求的请求头:

预检请求请求头.png

预检请求的响应头:

预检请求响应.png

其他cors请求的相关字段

(1) Access-Control-Allow-Methods
该字段必需，它的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法。注意，返回的是所有支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求。
（2）Access-Control-Allow-Headers
如果浏览器请求包括Access-Control-Request-Headers字段，则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段，不限于浏览器在"预检"中请求的字段。
（3）Access-Control-Allow-Credentials
该字段与简单请求时的含义相同。
（4）Access-Control-Max-Age
该字段可选，用来指定本次预检请求的有效期，单位为秒。上面结果中，有效期是20天（1728000秒），即允许缓存该条回应1728000秒（即20天），在此期间，不用发出另一条预检请求。