TechVue.jsJapanese
Vue.jsaxiosVue CLI

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

Tech
2021.04.29

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

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

Source Code

[ads]

エラーが発生した際のソースコードは以下のとおりでした。
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

[ads]

対処自体は簡単で、 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"

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

まとめ

[ads]

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

Cannot read property 'protocol' of undefined
Getting that error in console when trying to get data from a API. Anybody have this issue before? var url = "" + localSt...
stackoverflow.com
Ads
harubears
Ads