前言

  有这样的一个需求,后台服务器要求把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. 为什么Java中一个char能存下一个汉字

    在Java中,char的长度是2字节,即16位,2的16次方是65536. 1.如果采用utf-8编码,一个汉字占3个字节,char为什么还能存下一个汉字呢? 参考:https://developer ...

  2. windows下安装hexo和生成博客

    首先在电脑上安装node和git,这个只要在相关官网的下载然后一步安装即可. 然后在你的电脑上新建一个文件夹,用来存放你的博客文件,比如创建hexo 进入该文件,右键打开git bash 安装hexo ...

  3. 简单了解Django应用app及分布式路由

    前言 应用在Django的项目中是一个独立的业务模块,可以包含自己的路由,视图,模板,模型. 一 创建应用程序 创建步骤 用manage.py中的子命令startapp创建应用文件夹 在setting ...

  4. iPad所有平板型号屏幕尺寸

    1.iPad所有平板型号屏幕尺寸 尺寸 iPad型号 物理点 像素点 倍数 7.9 iPad Mini 768x1024 768x1024 1 7.9 iPad Mini 2 iPad Mini 3 ...

  5. 【JUC】5.线程池—Executor

    创建线程池可以分为三种方式: 1. 通过ThreadPoolExecutor的构造方法,创建ThreadPoolExecutor的对象,即一个线程池对象: 此构造方法,一共7个参数,5个必须参数,2个 ...

  6. ubuntu下关于profile和bashrc中环境变量的理解(转)

    ubuntu下关于profile和bashrc中环境变量的理解(转)   (0) 写在前面 有些名词可能需要解释一下.(也可以先不看这一节,在后面看到有疑惑再上来看相关解释) $PS1和交互式运行(r ...

  7. Spark中Task,Partition,RDD、节点数、Executor数、core数目(线程池)、mem数

    Spark中Task,Partition,RDD.节点数.Executor数.core数目的关系和Application,Driver,Job,Task,Stage理解 from:https://bl ...

  8. 《少年先疯队》第八次团队作业:Alpha冲刺第三天

    前言   第三天冲刺会议    时间:2019.6.16   地点:宿舍 3.1 今日完成任务情况以及遇到的问题.   3.1.1今日完成任务情况 姚玉婷:酒店的会员信息的管理,如会员的添加,删除 马 ...

  9. notepad++ 调整行间距

    在“设置”-“语言格式设置”里面,找到style里面的Line number margin一项,调整字体大小就可以调整左边标号的大小,然后文本内容的行间距即可任意调整.

  10. workerman——报错

    stream_socket_server(): unable to connect to tcp://0.0.0.0:8282 (Address already in use) in file [报错 ...