Why do I have TypeError: Cannot read property 'protocol' of undefined using axios with vue?

Question

I'm trying to do a simple get request to my backend server with axios. I'm getting this stacktrace in the console:

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

Here are the code files: https://gist.github.com/DavidMarcu/68f6bd20fa1e21568464f10e2a2baa6a Code: store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import bookService from '@/service/BookService.js';

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    books: []
  },
  mutations: {
    SET_BOOKS(books) {
      this.state.books = books
    }
  },
  actions: {
    fetchBooks(context) {
      bookService.getAllBooks()
        .then(response => {
          console.log(response)
          context.commit('SET_BOOKS', response.data)
      })
        .catch(error => {
          console.log(error)
        })
    }
  },
  modules: {
  }
})

Home.vue(view component) - template is irrelevant

<script>
import BookElement from "@/components/BookElement.vue";
export default {
  components: {
    BookElement
  },
  created() {
    this.$store.dispatch("fetchBooks");
  },
  computed: {
    books() {
      return this.$store.state.books;
    }
  }
};
</script>

<style scoped>
</style>

BookService.js

import axios from 'axios';

const apiClient = axios.create({
  baseUrl: `http://localhost:9001/books`,
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  }
})

const bookService = {
  getAllBooks() {
    return apiClient.get()
  }
}

export default bookService

I tried the plugin solution(vue-axios), but I don't understand all that hassle just for making a get request that is not even in a .vue file, but in a .js file which I import in my component. The axios package is indeed installed. What I'm expecting is to see in the Home component in the vue devtools that in the books computed property I have the response body.

Edit: I added the code in the question as well.

Answer 1

You didn't pass url to get:

Change it like this:

return apiClient.get('/')