标准的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. xshell --- 查看和关闭 进程

    netstat -apn | grep 80 kill -l PID  关闭进程

  2. Zabbix + Grafana

    Grafana 简介 Grafana自身并不存储数据,数据从其它地方获取.需要配置数据源 Grafana支持从Zabbix中获取数据 Grafana优化了图形的展现,可以用来做监控大屏 Grafana ...

  3. Codefroces 766D Mahmoud and a Dictionary

    D. Mahmoud and a Dictionary time limit per test 4 seconds memory limit per test 256 megabytes input ...

  4. js简易留言板

      <!DOCTYPE html>   <html lang="en">   <head>   <meta charset="U ...

  5. 初学h5须知

    9.41.浏览器是页面的环境(类似水是鱼的环境)2.浏览器结构:title    标题,题目                           URL      网址                ...

  6. hdu1874 畅通project续 最短路 floyd或dijkstra或spfa

    Problem Description 某省自从实行了非常多年的畅通project计划后.最终修建了非常多路.只是路多了也不好,每次要从一个城镇到还有一个城镇时,都有很多种道路方案能够选择.而某些方案 ...

  7. Windows 98 二十岁了,这些功能都是从它开始的(虽然 Windows 98 不如 Windows 95 那样具有革命性,但完成度更高,更加成熟。到最后还是:相见不如怀念。)

    1998 年 6 月 25 日午夜,美国著名连锁零售店 CompUSA 门外挤满了狂热的消费者和媒体,他们在等待一款软件发售:Windows 98,即使明知它要到当天早上才正式上市. ▲ 在 Comp ...

  8. 6lession-基本数据类型

    因为自己是根据网上教程学习的,所以以下内容参考自 http://www.w3cschool.cc/python/python-variable-types.html python支持物种数据类型,分别 ...

  9. Day2平衡树笔记

    线段树不支持的操作:删除,插入 常见的平衡树 treap 慢||好写 sbt(大小平衡的树) 非常快 比较好写 ||功能不全 rbt 红黑树 特别快 || 非常难写   以上操作支持插入删除O(Nlo ...

  10. android通用JSON解析

    ackage cn.com.pcgroup.<a href="http://lib.csdn.net/base/15" class="replace_word&qu ...