vue+vue-resource设置请求头(带上token) 前言

最新推荐文章于 2025-05-11 09:31:28 发布

Chao_Yue_

最新推荐文章于 2025-05-11 09:31:28 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.csdn.net/Chao_Yue_/article/details/104625683

vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了在Vue项目中如何将Token放入请求头的三种实用方法：全局配置、Vue实例设置及拦截器中设置。并通过实例展示了每种方法的具体实现，帮助开发者灵活选择适合项目的Token传递方案。

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

　有这样的一个需求，后台服务器要求把token放在请求头里面

　　嗯一般是通过data里面通过参数带过去的

第一种方法

　　全局改变：

　　Vue.http.headers.common['token'] = store.state.token;

　　之前是吧token刚在data里面的

　　是我封装的一个get 请求，亲测有用。现在我们项目就是用的这一种

　　然后放一个请求成功的实例

　　首先会先发一个 OPTIONS 预请求

　　然后发出正式请求

第二种方法：

　　不能局限于一种方法嘛！

　　第二种方法是：在Vue实例中设置

复制代码

var vm = new Vue({
  el:'#app',
  data:{
   showList: true,
   title: null
  },
  http: {
    root: '/',
    headers: {
      token: token
    }
  }
})

复制代码

第三种方法：在拦截器中设置 vue interceptors 设置请求头

复制代码

Vue.http.interceptors.push((request, next) => {
    request.headers.set('token', token); //setting request.headers
    next((response) => {
      return response
   })
})

复制代码

还可以这样

　　在在main.js添加过滤器

复制代码

Vue.http.interceptors.push((request,next)=>{
 //request.credentials = true; // 接口每次请求会跨域携带cookie
 //request.method= 'POST'; // 请求方式（get,post）
 //request.headers.set('token','111') // 请求headers携带参数
 
 next(function(response){
  return response;
 
 });
})

复制代码

Fannie总结

　　后面的方法要自己去实践哦，我用的是第一种。

　　然后再次提醒一下，你们自家的服务器要支持这样传token哦~

　　不然会报个错的，像下面这样

Request header field token is not allowed by Access-Control-Allow-Headers in preflight response.

　　拜拜了。