axios

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 コンポーネントは以下のとおり（抜粋）です。 ... Exec ... 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 }, ... この状態で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 ( ) 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" これで、エラーが消えました。 まとめ 以下のサイトを参考にしていたのですが、解決してなによりでした。 https://stackoverflow.com/questions/21347542/cannot-read-property-protocol-of-undefined

axios

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