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
        }
      });

推荐使用后端解决（虽然可能会耗用更多的服务器资源）