今天团队关于跨域请求遇到了一个小问题，在前后端分离请求中会触发跨域OPTIONS请求，而后端使用拦截器处理OPTIONS请求时，前端无法正常继续GET请求。主要是对一个已经在使用的接口增加验证码功能，但是又不能修改原接口参数字段，故在Header中增加了一个自定义字段。
先是整理了浏览器对于跨域请求的定义，对跨域请求区分为“简单请求”与“非简单请求”。
“简单请求”满足以下特征：
（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
不满足这些特征的请求称为“非简单请求”，例如：content-type=applicaiton/json , method = PUT/DELETE，HTTP头自定义字段（这次我们遇到的问题就是增加了自定义字段code）
1、非简单请求的预检测
如果我们发送的跨域请求为“非简单请求”，浏览器会在发出此请求之前首先发送一个请求类型为OPTIONS的“预检请求”，验证请求源是否为服务端允许源，这些过程对于开发者来说是感觉不到的，由浏览器代理。
2、请求的过程
简单请求
浏览器判断跨域为简单请求时候，会在Request Header中添加 Origin （协议 + 域名 + 端口）字段 ， 它表示我们的请求源，服务端会将该字段作为跨源标志。
服务端接收到此次请求后 ， 首先会判断Origin是否在允许源（由服务端决定）范围之内，如果验证通过，服务端会在Response Header 添加 Access-Control-Allow-Origin、Access-Control-Allow-Credentials等字段。
必须字段：
Access-Control-Allow-Origin：表示服务端允许的请求源，*标识任何外域，多个源 , 分隔
可选字段：
Access-Control-Allow-Credentials：false 表示是否允许发送Cookie。设置为true，同时ajax请求设置withCredentials = true，浏览器的cookie就能发送到服务端；
浏览器收到Respnose后会判断自己的源是否存在 Access-Control-Allow-Origin允许源中，如果不存在，会抛出“同源检测异常”。
总结：简单请求只需要服务端在接受到携带Origin字段的跨域请求后，在response header中添加Access-Control-Allow-Origin等字段给浏览器做同源判断。
非简单请求
进行非简单请求时候 ， 浏览器会首先发出类型为OPTIONS的“预检请求”，服务端对“预检请求”处理，并对Response Header添加验证字段，客户端接受到预检请求的返回值进行一次请求预判断，验证通过后，主请求发起。
这里可以看到，浏览器连续发送了两个请求 ， 第一个就是“预检请求”，类型为OPTIONS，此处也需要按简单请求中一样，在Response Header 添加 Access-Control-Allow-Origin、Access-Control-Allow-Credentials等字段。但此处要注意的是，因为我们在GET请求的Request Headers中设置了code这个属性 ，所以预检请求的Request Headers中的Access-Control-Request-Headers的值也为code，那Response Headers中的Access-Control-Allow-Headers必须携带code，否则OPTIONS请求会失败。
预检请求通过后，主请求与简单请求一致。
总结：非简单请求需要服务端对OPTIONS类型的请求做处理！
3、手动解决的办法
在服务端处理过程时，在响应头中增加以下几部分的内容即可：
Access-Control-Allow-Origin服务器能接受的跨域请求来源，配置 主机地址(http://www.xxx.com，如有端口也要加上), * 表示任意地址都行
Access-Control-Allow-Headers 表示能接受的http头部，此处要加入你自己构建的头部字段，如上面的code
Access-Control-Allow-Methods 表示能接受的http mothed ，看使用情况加上，如GET、POST、OPTIONS等
网友评论