[Vue.js][axios]How to solve “Uncaught (in promise) TypeError: Cannot read property ‘protocol’ of undefined at isURLSameOrigin”

Vue CLIプロジェクトにおいて、b-buttonを設置し、クリックすることで、axiosを使ったAPIを発行する簡単なコードを作成したところ、以下のエラーが発生し、それを解決することができたので、その方法を説明します。

Uncaught (in promise) TypeError: Cannot read property 'protocol' of undefined
 at isURLSameOrigin
...

Source Code

エラーが発生した際のソースコードは以下のとおりでした。
main.jsは以下のとおりです。

// main.js
import Vue from 'vue'
import BootstrapVue from "bootstrap-vue"
import App from './App.vue'

Vue.use(axios)
Vue.use(BootstrapVue)

new Vue({
  render: h => h(App),
}).$mount('#app')

Vueコンポーネントは以下のとおり(抜粋)です。

<template>
...
	<b-button
	  variant="success"
	  @click="onClick"
	>Exec</b-button>
...
</template>
<script>
import axios from 'axios'
...
methods: {
    onClick() {
      try {
        this.axios_get("http://127.0.0.1:5000")
      } catch (e) {
        console.log("onClick error: ", e)
      }
    axios_get(endpoint) {
      axios.get(endpoint).then(response => (this.match_data = response.data))
    },
    onRowSelected(items) {
      this.selected = items
    },
...
</script>

この状態でnpm run serveで起動すると、そもそもaxiosを呼び出す前に以下のエラーが表示されていました。

isURLSameOrigin.js?3934:57 Uncaught (in promise) TypeError: Cannot read property 'protocol' of undefined
    at isURLSameOrigin (isURLSameOrigin.js?3934:57)
    at dispatchXhrRequest (xhr.js?b50d:108)
    at new Promise (<anonymous>)
    at xhrAdapter (xhr.js?b50d:13)
    at dispatchRequest (dispatchRequest.js?5270:52)

Solution

対処自体は簡単で、vue-axiosをインストールし、以下を追記するのみでした。

npm install --save axios vue-axios
// main.js
import Vue from 'vue'
import VuePapaParse from 'vue-papa-parse'

import BootstrapVue from "bootstrap-vue"
import App from './App.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap-vue/dist/bootstrap-vue.css"

Vue.use(VueAxios, axios)
Vue.use(VuePapaParse)
Vue.use(BootstrapVue)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

モジュールバージョン

"axios": "^0.21.1"
"vue-axios": "^3.2.4"

これで、エラーが消えました。

まとめ

以下のサイトを参考にしていたのですが、解決してなによりでした。

References

本稿は以下公式フォーラムの内容を参考にさせていただきました。