Vue+axios配置踩坑记录

避免误导，先上亲测可用的代码：

/**
 * Axios封装
 *./src/axios/index.js
**/
import axios from 'axios'
import { Notice,Message,Modal,Spin } from 'iview';
import store from '../vuex/store'
import { apiBase } from 'common/api.config';
import qs from 'qs'
import {common} from '../common/js/common.js';
import iView from 'iview'

// axios 配置
axios.defaults.timeout = 10000;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
axios.defaults.baseURL = apiBase();
axios.defaults.loading = true;
// post传参序列化
axios.interceptors.request.use((config) => {
  store.state.loading = true;//loading等待
  let token = localStorage.getItem("token")
  if( config.loading ) {
    AJAX_NUM++;
    $('.loding-spin','.dashborad-wrapper').show();
  }
  if(config.method  === 'post'){
    let data = qs.parse(config.data)
    config.data = qs.stringify({
      token: token,
      ...data
    })
    // config.data = qs.stringify(config.data);
  } else if(config.method  === 'get'){
    config.params = {
      token: token,
      ...config.params,
    }
  }
  return config;
},(error) =>{
  return Promise.reject(error);
});
//返回状态判断
axios.interceptors.response.use((res) =>{
  AJAX_NUM--;
  if (AJAX_NUM === 0) { //所有Ajax加载完毕
    $('.loding-spin','.dashborad-wrapper').hide();
  }
  store.state.loading = false;//loading等待
  if(res.data.code){
    if (res.data.code == 100) {
      return res;
    }else if(res.data.code == 103){ //token失败
      Notice.error({
        title: '登录验证失败',
        desc: res.data.msg,
        duration:3,
        onClose:function () {
          location.href = '/static/login.html';
        }
      });
      localStorage.removeItem('user');
    }else if(res.data.code == 104){ //新用户，默认密码，需要修改默认密码
      common.dialog('重要提示',res.data.msg,() => {
        location.hash = '/public/center/personal';
        $('#editPasswordBtn').trigger('click');
      });
    }else if(res.data.code == 101){ //参数有误或后台报错
      common.notices(res.data.code +"："+ res.data.msg , '操作失败', 'warning');
    }else{
      Notice.error({
        title: '操作失败',
        desc:  res.data.msg,
        duration:3,
      });
      return Promise.reject(res);
    }
  }
}, (error) => {
  store.state.loading = false;//loading等待
  AJAX_NUM = 0;
  Notice.error({
    title: '网络异常 '+ error,
    desc: '请检查网络，或者稍后刷新重试',
    duration:4,
  });
  return Promise.reject(error);
});

export function fetch(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, params)
      .then(res => {
        resolve(res);
      }, err => {
        reject(err);
      })
      .catch((error) => {
        reject(error)
      })
  })
}
export function fetchGet(url, params) {
  return new Promise((resolve, reject) => {
    axios.get(url, params)
      .then(response => {
        resolve(response);
      }, err => {
        reject(err);
      })
      .catch((error) => {
        reject(error)
      })
  })
}
export function fetchJSON(url, params) {
  return new Promise((resolve, reject) => {
    axios.get(url, params)
      .then(response => {
        resolve(response);
      }, err => {
        reject(err);
      })
      .catch((error) => {
        reject(error)
      })
  })
}
let token = localStorage.getItem("token");

export default {
  get(url,data) {
    return fetchGet(url,data)
  },
  post(url,data) {
    return fetch(url,data)
  },
  getJSON(url,data) {
    return fetchJSON(url,data)
  }
}

在这里就不上错误的代码了，之前按照网上的一些教程进行了axios的配置和封装，结果发请求时出现了这样的错误：

而且是部分接口正常，部分接口报错的偶发。

开始考虑到是axios的机制问题，因为会请求两次，会先发一次option预请求，查看后台是否是允许了option请求方式，正确设置了之后还是出现跨域报错的问题。

接着考虑了取消option预请求，还是不行。

最后经过反复的尝试，最后还是在axios配置的部分解决了问题。