基于vue.js：axios增加的自定义header(token)，后端getRequest()取不到？

前端采用axios提交数据，采用拦截方式设置header信息

浏览器显示也是成功添加进去了后端使用getRequest()来获取自定义header中的token

反正一直就是拿不到token, 在后端根本找不到这个键（token），前端返回401

仔细看了一会儿发现，浏览器将CORS请求分为两类： 简单请求（simple request）和非简单请求（not-simple-request）,简单请求浏览器不会预检，而非简单请求会预检。

一，同时满足下列三大条件，就属于简单请求，否则属于非简单请求

1.请求方式只能是：

GET、POST、HEAD2.HTTP请求头限制这几种字段：Accept、Accept-Language、Content-Language、Content-Type、Last-Event-ID3.Content-type只能取：application/x-www-form-urlencoded、multipart/form-data、text/plain对于简单请求，浏览器直接请求，会在请求头信息中，增加一个origin字段，来说明本次请求来自哪个源（协议+域名+端口）。服务器根据这个值，来决定是否同意该请求，服务器返回的响应会多几个头信息字段，如图所示：上面的头信息中，三个与CORS请求相关，都是以Access-Control-开头。
复制代码

2.Access-Control-Allow-Origin：

该字段是必须的，* 表示接受任意域名的请求，还可以指定域名2.Access-Control-Allow-Credentials：该字段可选，是个布尔值，表示是否可以携带cookie，（注意：如果Access-Control-Allow-Origin字段设置*，此字段设为true无效）
复制代码

3.Access-Control-Allow-Headers：

该字段可选，里面可以获取Cache-Control、Content-Type、Expires等，如果想要拿到其他字段，就可以在这个字段中指定。比如图中指定的GUAZISSO非简单请求是对那种对服务器有特殊要求的请求，比如请求方式是PUT或者DELETE，或者Content-Type字段类型是application/json。都会在正式通信之前，增加一次HTTP请求，称之为预检。浏览器会先询问服务器，当前网页所在域名是否在服务器的许可名单之中，服务器允许之后，浏览器会发出正式的XMLHttpRequest请求，否则会报错。
复制代码

二，预请求和正式请求对比：

预请求：OPTIONS 在请求header中是没有自定义的token的。

正式请求： get/post 自定义的token在header中出现了。

问题所在：

浏览器在预检请求是不会携带自定义header，只有在正式请求才会携带header和参数。就跟普通请求一样，响应头也会增加同样字段。一旦服务器通过了“预检”请求，之后的正式请求中才能获取到request中header的自定义token了！

处理方法：

后端拦截浏览器的请求，获取请求方式，如果请求方式为预请求时给予通过不去过去header中的自定义属性，反正当拦截到的请求为正式请求时，此时才进行该有的逻辑处理（获取自定义参数or获取token进行会话校验）