vue axios发送请求后端接收不到token(JWT)_vue axios.interceptors.request.use 监听 jwt 没有带上-优快云博客

本文链接：https://blog.youkuaiyun.com/Sakura0FF/article/details/115717413

当Vue应用中使用Axios发送请求时，如果Content-Type设置为默认的`application/json`，浏览器会将请求视为复杂请求，从而发送一个OPTIONS预请求。为避免这种情况，可以在后端设置拦截器允许OPTIONS请求，或者在前端将Content-Type更改为`application/x-www-form-urlencoded`并使用qs库转换数据。推荐后端处理以减少不必要的服务器资源消耗。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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