vue axios发送请求后端接收不到token(JWT)

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

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

<think>嗯,用户的问题是在Vue中如何让所有页面或路由请求获取到后端返回的JWT token。首先,我需要确定用户的使用场景。通常,在Vue应用中,用户登录后会从后端获取一个JWT,然后需要在后续的API请求中将这个token添加到请求头中,比如Authorization头。用户可能想知道如何全局管理这个token,避免在每个组件中重复获取或设置。 接下来,我需要考虑可能的解决方案。常见的方法是将token存储在本地存储(localStorage或sessionStorage)或者Vuex状态管理库中。这样,无论用户在哪个路由或组件,都可以方便地获取token。同时,需要设置一个全局的请求拦截器,比如使用axios的拦截器,在每个请求中自动添加token请求头里。 用户可能对如何具体实现这些步骤不太清楚。比如,如何在Vuex中存储token,如何与axios结合使用,以及如何处理token的持久化。此外,还需要考虑安全性问题,比如使用httpOnly cookies是否更安全,但用户的问题可能更倾向于使用localStorage的方式。 然后,我需要分步骤解释:首先存储token,然后配置axios的全局拦截器。同时,要提到在Vue应用初始化时从存储中获取token,这样即使页面刷新,token也不会丢失。另外,路由守卫也是一个可能的点,用于检查用户是否认证,但用户的问题更关注的是如何在请求中携带token,而不仅仅是路由跳转时的验证。 可能用户会遇到的问题包括:token的存储安全性,跨域请求时的cookie设置,或者如何处理token过期的情况。但根据当前问题,可能不需要深入讨论这些,但可以简要提及。 最后,总结步骤:保存token到本地存储和Vuex,配置axios拦截器添加token请求头,初始化时从存储加载token。同时,提醒用户注意安全最佳实践,比如结合https使用,避免XSS攻击等。</think>在 Vue 中全局管理 JWT Token 并自动将其附加到所有请求,可以通过以下步骤实现: --- ### 1. **存储 Token** 在用户登录后,将 Token 存储到 **Vuex**(全局状态管理)和 **浏览器本地存储**(持久化)中: ```javascript // 登录成功后(如 Login.vue) this.$store.commit('setToken', jwtToken) // 存入 Vuex localStorage.setItem('jwt_token', jwtToken) // 持久化到本地存储 ``` --- ### 2. **配置全局 Axios 拦截器** 通过 Axios请求拦截器,在所有请求头中自动添加 Token: ```javascript // src/utils/axios.js(或 main.js) import axios from 'axios' // 创建 axios 实例 const instance = axios.create({ baseURL: 'https://your-api-domain.com' }) // 请求拦截器 instance.interceptors.request.use(config => { const token = localStorage.getItem('jwt_token') || store.state.token if (token) { config.headers.Authorization = `Bearer ${token}` } return config }) export default instance ``` --- ### 3. **初始化时加载 Token** 在应用启动时从本地存储恢复 Token: ```javascript // src/main.js new Vue({ beforeCreate() { const token = localStorage.getItem('jwt_token') if (token) this.$store.commit('setToken', token) }, // ...其他配置 }) ``` --- ### 4. **统一使用封装后的 Axios** 在组件中使用封装好的 axios 实例发起请求: ```javascript import axios from '@/utils/axios' // 在组件中调用 API axios.get('/api/data').then(...) ``` --- ### 5. (可选)路由守卫验证 如果需要全局路由鉴权,可以用 Vue Router 的全局前置守卫: ```javascript // src/router/index.js router.beforeEach((to, from, next) => { const isAuthenticated = localStorage.getItem('jwt_token') !== null if (to.meta.requiresAuth && !isAuthenticated) { next('/login') } else { next() } }) ``` --- ### **关键点说明** - **存储策略**:Vuex 用于内存态管理,localStorage 用于持久化(页面刷新不丢失) - **安全建议**: - 优先使用 `httpOnly` Cookie 存储敏感 Token(需后端配合) - 避免将 Token 暴露在 URL 或全局变量中 - 启用 HTTPS 保护传输安全 - **Token 续期**:可在响应拦截器中实现自动刷新 Token 的逻辑 如果使用 Nuxt.js,可以通过插件机制更优雅地实现(`nuxt.config.js` 中配置 axios 插件)。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值