vue中配置axios、携带token验证、设置跨域

1.main.js

import Vue from 'vue'
import axios from './api/http.js'

//将axios挂载到全局，在通过this.$http调用axios
Vue.prototype.$http = axios

2.新建一个envConfig.js文件,配置开发环境。方便打包、切换环境

/**
 * 环境配置
 */
import axios from 'axios'
const prdServer = 'http://baidu.com/api/'
const testServer = 'http://taobao./api/'
export const env = testServer;
if (process.env.NODE_ENV == 'development') {
    axios.defaults.baseURL = env
} else if (process.env.NODE_ENV == 'debug') {
    axios.defaults.baseURL = env
} else if (process.env.NODE_ENV == 'production') {
    axios.defaults.baseURL = env
}

3.新建一个httpConfig.js文件,配置axios

如果不使用cookie验证的话发生跨域则在 axios.create( ) 内添加 withCredentials: true；不使用cookie则不需要做跨域处理

/**
 *  1.axios配置  2.请求拦截器 3.接口报错统一处理
 */

// 引入模块
import store from '@/store/index' //登录后将token存储在store 中因此需要引入
import qs from 'qs' // 使用qs 将数据格式转为表单提交，看后台需要什么类型的传参，非必须
import axios from 'axios'

// axios初始化：延迟时间，主路由地址,是否允许跨域
let instance = axios.create({
  baseURL: axios.defaults.baseURL,//默认环境
  timeout: 10000,
  withCredentials: true,//开启跨域并携带cookie,如果接口并不接收cookie验证的话则不需要
});

// 设置拦截器
instance.interceptors.request.use(function (config) {
  //在发送请求之前做某事
  if (config.url == "login/login") {
    return config;
  } else { // 在此设置请求头统一携带token
    config.headers.accesstoken = store.getters.getuserInfo.token
    return config;
  }
}, function (error) {
  console.log("拦截器---err")
  //请求错误时做些事
  return Promise.reject(error);
});
//响应拦截器
instance.interceptors.response.use(function (response) {
  //对响应数据做些事
  return response;
}, function (error) {
  //请求错误时做些事
  return Promise.reject(error);
});

// 是否销毁拦截器
// 1.给拦截器起个名称 var myInterceptors = instance.interceptors.requesst.use();
// 2.instance.interceptors.request.eject(myInterceptor);

// 请求成功的回调
function checkStatus(res) {
  //请求结束成功
  if (res.status === 200 || res.status === 304) {
    return res.data
  }
  return {
    code: 0,
    msg: res.data.msg || res.statusText,
    data: res.statusText
  }
  return res
}
// 请求失败的回调
function checkCode(res) {
  if (res.code === 0) {
    throw new Error(res.msg)
  }
  return res
}
//模块化导出
export default {
  get(url, params) {
    if (!url) return;
    return instance({
      method: 'get',
      url: url,
      params,
      timeout: 30000
    }).then(checkStatus).then(checkCode)
  },
  post(url, data) {
    if (!url) return;
    return instance({
      method: 'post',
      url: url,
      data: qs.stringify(data),
      timeout: 30000
    }).then(checkStatus).then(checkCode)
  },
  postFile(url, data) {
    if (!url) return;
    return instance({
      method: 'post',
      url: url,
      data
    }).then(checkStatus).then(checkCode)
  }
}

4.使用

methods:{
    test(){
        //等同于 http://taobao./api/接口地址
        this.$http.get("接口地址").then(res => { }).catch(err => { })
    }
}