前言

  有这样的一个需求,后台服务器要求把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.

  拜拜了。

vue+vue-resource设置请求头(带上token)的更多相关文章

  1. axios配置及使用(发起请求时带上token)

    1.安装 利用npm安装 npm install axios --save 2.引入即可使用 import axios from 'axios' 3.目录 4.各个文件设置: (1)env.js ex ...

  2. 原生js实现文件下载并设置请求头header

    原生js实现文件下载并设置请求头header const token="自行定义";//如果有 /** * 向指定路径发送下载请求 * @param{String} url 请求路 ...

  3. axios中为所有请求带上Token头

    axios中为所有请求带上Token头 https://www.imooc.com/article/27751

  4. 在AngularJs中怎么设置请求头信息(headers)及不同方法的比较

    在AngularJS中有三种方式可以设置请求头信息: 1.在http服务的在服务端发送请求时,也就是调用http()方法时,在config对象中设置请求头信息:事例如下: $http.post('/s ...

  5. 设置请求头解决浏览器同源问题,ajx跨域获取cookie问题

    思想: 添加过滤器 设置请求头 代码如下 import java.io.IOException; import javax.servlet.Filter; import javax.servlet.F ...

  6. axios设置请求头失效的问题

    前言:因为在使用vue-element-admin框架时遇到了设置请求头失效的问题,在后来发现是代理跨域问题,所以又简单理解了一下跨域. 出现的问题是我在axios拦截器上设置了请求头token,但是 ...

  7. SpringBoot图文教程17—上手就会 RestTemplate 使用指南「Get Post」「设置请求头」

    有天上飞的概念,就要有落地的实现 概念十遍不如代码一遍,朋友,希望你把文中所有的代码案例都敲一遍 先赞后看,养成习惯 SpringBoot 图文教程系列文章目录 SpringBoot图文教程1-Spr ...

  8. ajax中的setRequestHeader设置请求头

    1.问题引发点: 前不久发现一个问题: 前端并没有设置请求头信息里面的Accept-Encoding:gzip...但是在请求头中可以明显的看到Accept-Encoding:gzip, deflat ...

  9. ajax里post 设置请求头的编码格式

    我们常用的ajax形式就是post和get.post需要设置请求头,那么问题来了: 首先,为什么get不需要设置编码格式? 其次:不设置post请求头编码格式可以吗? 还有:常用的请求头编码格式有哪些 ...

随机推荐

  1. CentOS - 查看操作系统版本

    cat /etc/redhat-release 参考: https://www.cnblogs.com/baby123/p/6962398.html

  2. Sbase数据库自动截断日志

    http://infocenter.sybase.com/help/index.jsp?topic=/com.sybase.infocenter.dc36273.1550/html/sprocs/X3 ...

  3. XnViewer管理浏览照片、图片

    有时候拍完照片想要浏览照片.浏览照片的时候想做一些标记,这个时候就需要使用照片管理器: 之前一直使用谷歌的picasa(不更新了),adobe也有个管理器(比较大):这里主要推荐一个: https:/ ...

  4. java web编程 servlet读取配置文件参数

    新建一个servlet. 然后在web.xml文件里面自动帮助你创建好了<servlet-name><servlet-class><servlet-mapping> ...

  5. 微信小程序分享小程序码的生成,多参数以及参数的获取

    如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 官方文档地址:https://developers.weixin.qq.com/minipro ...

  6. Cephfs 部署 创建 metadata 池 data池

    上一次部署了ceph分布式存储,接下来我们部署ceph的文件系统.Ceph文件系统至少需要两个RADOS池,一个用于数据,一个用于元数据. 创建metadata 池 后面数字表示 PG 和pgp数 c ...

  7. Python——字符串增加颜色

    给显示字符添加颜色: salary=int(input('\033[31;1m请输入你的工资:\033[0m')) ('\033[;1m请输入你的工资:\033[0m') 3x是给字符串改变颜色 31 ...

  8. DevOps简介_转

    转自:DevOps简介     刘大飞 DevOps 是一个完整的面向IT运维的工作流,以 IT 自动化以及持续集成(CI).持续部署(CD)为基础,来优化程式开发.测试.系统运维等所有环节. Dev ...

  9. Git收藏

     Git Flow 的正确使用姿势 https://www.jianshu.com/p/41910dc6ef29 git合并分支上的commit为一条commit到master  https://ww ...

  10. keras模块学习之Sequential模型学习笔记

    本笔记由博客园-圆柱模板 博主整理笔记发布,转载需注明,谢谢合作! Sequential是多个网络层的线性堆叠 可以通过向Sequential模型传递一个layer的list来构造该模型: from ...