【Vue】vue用axios时报错：Cannot read property 'protocol' of undefined！

• Z时代
• 2024-01-10
• 分类：技术分享

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

回答

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

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

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

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

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);

以上是 【Vue】vue用axios时报错：Cannot read property 'protocol' of undefined！ 的全部内容， 来源链接： utcz.com/a/73199.html