避免誤導，先上親測可用的代碼：

/*** 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配置的部分解決了問題。

總結

以上是生活随笔為你收集整理的Vue+axios配置踩坑记录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。