vue用axios时报错:Cannot read property 'protocol' of undefined!

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)
Vue.use(axios)

报错信息:

isURLSameOrigin.js?cf95:57 Uncaught (in promise) TypeError: Cannot
read property 'protocol' of undefined

at isURLSameOrigin (eval at <anonymous> (app.js:929), <anonymous>:57:21)
at dispatchXhrRequest (eval at <anonymous> (app.js:754), <anonymous>:108:50)
at Promise (<anonymous>)
at xhrAdapter (eval at <anonymous> (app.js:754), <anonymous>:12:10)
at dispatchRequest (eval at <anonymous> (app.js:866), <anonymous>:52:10)

报错截图:

图片描述

但是,通过原型方式使用就正常

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)
Vue.prototype.$ajax = axios
阅读 45.5k
7 个回答

为啥老有人认为 axios 是一个vue插件。。话说哪里有写让你 Vue.use(axios) 来使用的。。

除了上面的原因,发现还有一个原因也会报这个错,就是当url是undefined的时候

main.js引入
import axios from 'axios'
Vue.prototype.$http = axios

组件中使用:
this.$http.post()

Vue.prototype.axios = axios

this.axios

如果你要用axios在vue上,可以去github搜索一下,有一个vue-axios,让你的vue实例中增加axios。

安装其他插件的时候,可以直接在 main.js 中引入并使用 Vue.use()来注册,但是 axios并不是vue插件,所以不能 使用Vue.use(),所以只能在每个需要发送请求的组件中即时引入。

为了解决这个问题,我们在引入 axios 之后,通过修改原型链,来更方便的使用。

import axios from 'axios';
import vueAxios from 'vue-axios'; //得npm i vue-axios

Vue.use(vueAxios,axios);

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏