标准的vue-cli项目结构(httpConfig文件夹自己建的):

api.js:

//const apiUrl = 'http://test';//测试域名,自己改成自己的
 const apiUrl = 'http://xxoo';//线上域名,自己改成自己的 

 export default apiUrl

http.js:

/**
* ajax请求配置
*/
import axios from 'axios'
import apiURL from './api.js'
//import Qs from 'qs' import cookie from '../../static/js/cookie.js' // axios默认配置
axios.defaults.timeout = 10000; // 超时时间
axios.defaults.baseURL = apiURL; // 默认地址 //整理数据
axios.defaults.transformRequest = function (data) {
//data = Qs.stringify(data);
data = JSON.stringify(data);
return data;
}; // 路由请求拦截
// http request 拦截器
axios.interceptors.request.use(
config => {
//config.data = JSON.stringify(config.data);
config.headers['Content-Type'] = 'application/json;charset=UTF-8';
//判断是否存在ticket,如果存在的话,则每个http header都加上ticket
if (cookie.get("token")) {
//用户每次操作,都将cookie设置成2小时
cookie.set("token",cookie.get("token") ,1/12)
cookie.set("name",cookie.get("name") ,1/12)
     config.headers.token = cookie.get("token");
     config.headers.name= cookie.get("name");
    }

    return config;
},
error => {
return Promise.reject(error.response);
}); // 路由响应拦截
// http response 拦截器
axios.interceptors.response.use(
response => {
if (response.data.resultCode=="404") {
console.log("response.data.resultCode是404")
// 返回 错误代码-1 清除ticket信息并跳转到登录页面
// cookie.del("ticket")
// window.location.href='http://login.com'
return
}else{
return response;
}
},
error => {
return Promise.reject(error.response) // 返回接口返回的错误信息
});
export default axios;

main.js

import axios from './httpConfig/http'
Vue.prototype.$http = axios

请求示例:

//post
this.$http.post('/itemProps/addItemProps',{
  name: this.name,
  parentId:this.parentId,
  sortOrder:0
}).then((res)=>{
  console.log(res)
}).catch((err)=>{
alert("请求失败")
})
//get
this.$http.get("/roles/getPersonnelInfoRoles",{
  params:{
    key:"value"
  }
}).then((res) => {
  console.log(res)
}).catch((err)=>{
  alert("请求失败")
})

vue项目对axios的全局配置的更多相关文章

  1. Django day32 跨域问题,创建vue项目,axios的使用

    一:跨域问题 1.同源策略(浏览器的安全策略) 只允许当前页面朝当前域下发请求,如果向其他域发请求,请求可以正常发送,数据也可以拿回,但是被浏览器拦截了 2.cors:只要服务器实现了CORS,就可以 ...

  2. vue项目使用axios发送请求让ajax请求头部携带cookie

    最近做vue项目时遇到登录权限问题,登录以后再发送的请求头部并没有携带登录后设置的cookie,导致后台无法校验其是否登录.检查发现是vue项目中使用axios发送ajax请求导致的.查看文档得知ax ...

  3. vue项目中 axios 和Vue-axios的关系

    文章收集于:https://segmentfault.com/q/1010000010812113 在vue项目中,会经常看到如下代码:   今天看到有些项目是这样写的,就有点看不懂了.  ----解 ...

  4. vue-cli新建vue项目安装axios后在IE下报错

    使用脚手架新建了一个vue项目,可以在IE9+浏览器运行,但是在添加了axios后,在IE下就报错了 首先是安装axios,在命令行执行: $ npm install axios -s //执行命令, ...

  5. vue-cli 引入 axios 并全局配置axios

    步骤一:vue add axios (向项目添加axios) 步骤二:在main.js 中 修改 如图 步骤三:在组件使用时,直接 this.$http.get().then() 即可......

  6. vue证明题三,vue项目的包结构和配置

    用vue-cli创建的项目带有自动配置好的包结构,包结构都是固定的. 关于详细的解释,网上多得是,只说下最重要的内容 1.vue项目包结构和端口号配置 这里笔者下了个HBuilderX来写代码. 2. ...

  7. Vue项目零碎知识(全局js,css配置,element-UI,bs使用, img动态配置,js数组)

    全局css样式,首先在静态assets中写好文件,然后要在main.js中配置 // 配置全局css样式 // import '@/assets/css/global.css' require('@/ ...

  8. vue-cli的项目中关于axios的全局配置,结合element UI,配置全局loading,header中做token传输

    在src目录中建立plugins文件夹,在文件夹内建立axios.js文件 "use strict"; import Vue from 'vue'; import axios fr ...

  9. vue项目引用 iView 组件——全局安装与按需加载

    框架的热度,出现了不少基于Vue的UI组件库,这次项目用到了 iView 这个组件库.使用方法官网很详细. 官网:https://www.iviewui.com/ 这篇文章主要是记录一下npm 全局安 ...

随机推荐

  1. asp.net 站点在Apache下的配置,就这么简单

    asp.net 站点在Apache下的配置,就这么简单 # # Virtual Hosts # # If you want to maintain multiple domains/hostnames ...

  2. area热点区域

    <area>标记:主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又称为热点),这样当用户的鼠标移到指定的作用区域点击时,会自动链接到预先设定好的页面.其基本语法结构如下: &l ...

  3. 【例题 8-13 UVA - 11093】Just Finish it up

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 尺取法. 假设现在取[l..r]这一段. 然后发现累加的和小于0了. 那么方法只能是不走l..l+1这一段了 即delta递减(p[ ...

  4. HUD——T 3836 Equivalent Sets

    http://acm.hdu.edu.cn/showproblem.php?pid=3836 Time Limit: 12000/4000 MS (Java/Others)    Memory Lim ...

  5. hash_set和hash_map

    1.hash_set集合容器 hash_set利用链式哈希表,进行数据的插入.删除和搜索.与set容器同样,不同意插入反复键值的元素.SGIC++哈希表是一个链式的结构,由表头和一系列单链组成.表头是 ...

  6. 《深入理解java虚拟机》学习笔记四/垃圾收集器GC学习/一

    Grabage Collection      GC GC要完毕的三件事情: 哪些内存须要回收? 什么时候回收? 怎样回收? 内存运行时区域的各个部分中: 程序计数器.虚拟机栈.本地方法栈这3个区域随 ...

  7. hdu 1863 畅通project kruskal || prim

    简单最小生成树,畅通project.这三道题目都是练习最小生成树的. 注意一下推断是否有通路时,kruskal能够推断每一个点的祖先是否同样.prim能够推断每一个点是否都加进集合里面了,也就是说是否 ...

  8. C++的class的样例

    私有就是仅仅可以通过内部调用,在类外面是不可以使用私有成员的 简单的写一个  Class A {  public:    //你能够通过公有的函数去訪问私有成员    Demo()   //能够在这使 ...

  9. ubuntu终端sudo java提示“command not found”解决办法

    我在ubuntu 12.04里想启动一个java程序,sudo java -jar xxx.jar,但是结果提示sudo:java:command not found. Ubuntu下用sudo运行j ...

  10. poj 2480 Longge&#39;s problem 积性函数性质+欧拉函数

    题意: 求f(n)=∑gcd(i, N) 1<=i <=N. 分析: f(n)是积性的数论上有证明(f(n)=sigma{1<=i<=N} gcd(i,N) = sigma{d ...