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

huqi
  • 820
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
回复
阅读 37.2k
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 之后,通过修改原型链,来更方便的使用。

流沙
  • 0
新手上路,请多包涵

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

Vue.use(vueAxios,axios);

宣传栏