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




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

一,同时满足下列三大条件,就属于简单请求,否则属于非简单请求
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的。


问题所在:
浏览器在预检请求是不会携带自定义header,只有在正式请求才会携带header和参数。就跟普通请求一样,响应头也会增加同样字段。一旦服务器通过了“预检”请求,之后的正式请求中才能获取到request中header的自定义token了!
处理方法:
后端拦截浏览器的请求,获取请求方式,如果请求方式为预请求时给予通过不去过去header中的自定义属性,反正当拦截到的请求为正式请求时,此时才进行该有的逻辑处理(获取自定义参数or获取token进行会话校验)