跨域资源共享CORS

摘要：跨域相关知识参数

现在的项目很多都是前后端分离了
前后端分离就会出现跨域的问题

关于跨域方面的学习
CORS是浏览器和服务器同时实现的
由浏览器向服务器发送跨域CORS请求，服务器进行响应是否同意进行跨域访问
浏览器跨域请求分为两种
简单请求和非简单请求

简单请求

简单请求包括“get请求，post请求，head请求”
并且还必须满足 请求标头信息只有以下五种字段

1. Accept
2. Accept-Language
3. Content-Language
4. Last-Even-ID
5. Content-Type：application/x-www-form-urlencoded 、multipart/form-data、text/plain仅限这三个值

比如打开百度的界面
点击网络请求，就会发现网络请求标头信息中不止上面五种，所以属于非简单请求
)

浏览器
当我们浏览器发送简单请求给服务器之前
浏览器会自动在请求标头上添加一条Origin 开头的请求源

Origin:https://xxxx.xxx

服务器允许访问
服务器发送响应标头

Access-Control-Allow-Origin: https://xxxx.xxx(浏览器请求地址)
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: YYYY

Access-Control-Allow-Origin：表示服务器允许接入的地址，这里的值可以是 * 表示可以接入任意的域名的请求。
Access-Control-Allow-Credentials：表示是否允许发送Cookie，默认值情况是不包含Cookie的，当值为true时，表示允许浏览器发送cookie给服务器
这个标头一般用在设置登录态的时候，也就是在页面需要获取当前用户信息的时候，服务器记录cookie到session中
当服务器要接收cookie，不仅需要Access-Control-Allow-Credentials: true，还需要前端设置Ajax请求 withwithCredentials = true，才能保证整个接收cookie流程成功

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

Access-Control-Expose-Headers：表示服务器返回的字段，浏览器可以通过getResponseHeader()来获取该字段对应的值
服务器拒绝访问
当浏览器的指定的Origin源不再服务器的许可范围内的时候，服务器仍然会响应HTTP/200的提示码，但是不会有Access-Control-xxx 三个响应信息，
浏览器接收不到，就判读为请求失败，抛出异常信息，并且捕获

非简单请求

非简单请求的特征：“PUT请求”“DELETE请求”以及Content-Type: Application/json

浏览器发送预请求
前端开发人员发送一个非简单的请求
浏览器发现是一个非简单的请求，就会现发送一个预请求

OPTION /xxx HTTP/1.1
Origin:
Access-Control-Request-Method:
Access-Control-Request-Headers:

Origin 和简单请求的Origin一致
Access-Control-Request-Method：表示浏览器先向服务器告知这是一个什么类型的请求
Access-Control-Request-Headers：表示浏览器发送的请求会额外发送的头信息字段

服务器对预请求的回应允许
发送响应

Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: yyyy
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000

Access-Control-Allow-Methods: 表示服务器允许的请求方法不限于预请求的方法
Access-Control-Allow-Headers: 表示服务器允许浏览器发送的头信息字段，当有这个“访问控制允许头”时，任何的都可以接收
Access-Control-Allow-Credentials: 与简单请求一致
Access-Control-Max-Age: 1728000 ：表示服务器接收该请求的时间，1728000秒=20天

服务器对预请求的回应拒绝
效果和简单请求拒绝一致

浏览器发送正常的请求和回应
与简单请求一致

服务器回应
Access-Control-Allow-Origin: http://xxx.xxx