vue-resouce设置请求头的三种方法

本文主要介绍了vue-resouce设置请求头的三种方法，分享给大家，具体如下：

第一种：在Vue实例中设置

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

第二种：全局设置请求头

Vue.http.headers.common['token'] = 'YXBpOnBhc3N3b3Jk';

第三种：在拦截器中设置

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

另附vue interceptors 设置请求头

在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;

 });
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue-resource 拦截器（interceptor）的使用详解

    拦截器-interceptor 在现代的一些前端框架上,拦截器基本上是很基础但很重要的一环,比如Angular原生就支持拦截器配置,VUE的Axios模块也给我们提供了拦截器配置,那么拦截器到底是什么,它有什么用? 拦截器能帮助我们解决的 1.添加统一的request的参数 比如header中加入X-Requested-With,比如客户端需要实现sign和token的验证机制,比如你可以写$http.get('/files', params),拦截器帮你拼接成 http://www.xxxx.

  • vue-resource 拦截器使用详解

    在vue项目使用vue-resource的过程中,临时增加了一个需求,需要在任何一个页面任何一次http请求,增加对token过期的判断,如果token已过期,需要跳转至登录页面.如果要在每个页面中的http请求操作中添加一次判断,那么会是一个非常大的修改工作量.那么vue-resource是否存在一个对于任何一次请求响应捕获的的公共回调函数呢?答案是有的! vue-resource的interceptors拦截器的作用正是解决此需求的妙方.在每次http的请求响应之后,如果设置了拦截器如下,会

  • vue-resource拦截器设置头信息的实例

    使用vue-resource,设置头信息: Vue.http.interceptors.push((request, next) => { request.headers.set('Authorization', token) console.log(request.headers) next(response => { console.log(response.status) return response }) }) 以上这篇vue-resource拦截器设置头信息的实例就是小编分享给大家

  • vue-resouce设置请求头的三种方法

    本文主要介绍了vue-resouce设置请求头的三种方法,分享给大家,具体如下: 第一种:在Vue实例中设置 var vm = new Vue({ el:'#rrapp', data:{ showList: true, title: null }, http: { root: '/', headers: { token: token } } }) 第二种:全局设置请求头 Vue.http.headers.common['token'] = 'YXBpOnBhc3N3b3Jk'; 第三种:在拦截器

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

    在AngularJs中有三种方式可以设置请求头信息: 1.在http服务的在服务端发送请求时,也就是调用 http服务的在服务端发送请求时,也就是调用 http()方法时,在config对象中设置请求头信息:事例如下: $http.post('/somePath' , someData , { headers : {'Authorization' : authToken} }).success(function(data, status, headers, config) { //... }).

  • springMVC解决ajax请求乱码的三种方法

    springMVC解决ajax请求乱码的问题 前言: 最近在项目的使用过程中发现在springmvc的项目中,使用返回页面的请求方式,数据都能正常显示,但是对于ajax的请求,始终显示乱码.首先第一种是因为我们在web.xml中配置了spring的字符编码过滤器,那么使用ajax请求为什么就不行了呢?下面简单的分析一下,仅供参考. 先列出简单的请求代码: 浏览器端: <script type="text/javascript"> $.ajax({ type: "P

  • js中设置元素class的三种方法小结

    一.el.setAttribute('class','abc'); 复制代码 代码如下: <!DOCTYPE HTML> <HTML> <HEAD> <meta charset="utf-8" /> <title>setAttribute('class', 'abc')</title> <style type="text/css"> .abc { background: red; }

  • 详解Nginx http资源请求限制（三种方法）

    前置条件:nginx 需要有 ngx_http_limit_conn_module 和 ngx_http_limit_req_module 模块,可以使用命令 2>&1 nginx -V | tr ' ' '\n'|grep limit 检查有没有相应模块,如果没有请重新编译安装这两个模块. 测试版本为:nginx版本为1.15+ 限制链接数 1.使用 limit_conn_zone 指令定义密钥并设置共享内存区域的参数(工作进程将使用此区域来共享密钥值的计数器).第一个参数指定作为键计算的

  • Vue如何为GET或POST请求设置请求头

    目录 为GET或POST请求设置请求头 安装vue-cookies vue项目设置请求头权限问题 为GET或POST请求设置请求头 安装vue-cookies 就通过我写的一个小项目的登录来讲vue-cookies,登陆成功后拿到后台返回的token值,把它保存到vue-cookies中 首先需要安装vue-cookies npm install vue-cookies --save 使用 import Vue from 'vue' import VueCookies from 'vue-coo

  • js批量设置样式的三种方法不推荐使用with

    一般我们都用css来批量设置样式,现在我们用js也可以批量设置样式: 总结三种方法如下 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style type="text/css"> #div1{

  • vue请求数据的三种方式

    请求数据的方式: vue-resource 官方提供的 vue的一个插件 axios fetch-jsonp 一,vue-resource请求数据 介绍:vue-resource请求数据方式是官方提供的一个插件 使用步骤: 1.安装vue-resource模块 cnpm install vue-resource --save 加--save是为了在package.json中引用,表示在生产环境中使用.因为我们在日常开发中,如果我们要打包代码给其他人或者上传到github,又或者要发布代码时,pa

  • 使用Vue实现图片上传的三种方式

    项目中需要上传图片可谓是经常遇到的需求,本文将介绍 3 种不同的图片上传方式,在这总结分享一下,有什么建议或者意见,请大家踊跃提出来. 没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务场景.假设我们要做一个后台系统添加商品的页面,有一些商品名称.信息等字段,还有需要上传商品轮播图的需求. 我们就以Vue.Element-ui,封装组件为例子聊聊如何实现这个功能.其他框架或者不用框架实现的思路都差不多,本文主要聊聊实现思路. 1.云储存 常见的 七牛云,OSS(阿里云)等,这些云平

  • vue 导出文件,携带请求头token操作

    前言 本文并不能直接复制到本地看效果,仅提供代码参考 1.使用axios的方式携带请求头token 2.设置响应的数据类型 responseType: "blob" 3.请求成功,返回二进制文件的数据回来 4.请求失败,返回json 5.示例代码 <template> <div> <el-button type="primary" size="small" :loading="btnLoading"

随机推荐