vue-axios发送请求后端接收不到tokenJWT
目录
vue axios发送请求后端接收不到token(JWT)
使用Axios时，会发送options 请求
http分为复杂请求和简单请求
当浏览器认为是简单请求时则不会发送options请求，反之会先发送一个options预请求，然后才会发送复杂请求。
满足以下条件的请求是简单请求：
- 请求方式：GET、POST、HEAD
- 请求的header里不能超出以下几种字段：
- Accept
- Accept-Language
- Content-Language
- Last-Event-ID
- Content-Type
- Content-Type 的值 只限于以下三种：
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
Vue默认的Content-Type:application/json
- 为复杂请求
解决办法
后端
- 使用拦截器过滤options请求
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
//axios在发送请求之前需要先发送一个OPTIONS预请求，相当于请求两次，直接放行
if ("OPTIONS".equals(request.getMethod().toString())) {
return true; //true是直接放行，前端抓包会有options请求
//false拒接访问，抓包就不会有options请求了
}
}字符串使用
equals
判断时，肯定存在的字符串写前面，可能为null写在里面，防止空指针异常（阿里巴巴规范）
前端
- 将复杂请求改为简单请求=>设置Content-Type:application/x-www-form-urlencoded
- Vue引入qs模块，将数据类型格式转成对应的格式（表单提交数据格式）
import qs from 'qs
Vue.prototype.$qs = qs
this.$axios
.post("http://xxx/",
this.$qs.stringify(postData)
).then(data => {
if (data.data.status != 200) {
//xxx
} else {
//xxx
}
});