title: Why do I get "We're sorry but book_management_front doesn't work properly without JavaScript enabled. Please enable it to continue"?
body: <p>The vue application works, the pages are correctly displayed, but when I send the get request via axios, the response body looks rather cryptic:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width,initial-scale=1.0"&gt;
      &lt;link rel="icon" href="/favicon.ico"&gt;
      &lt;title&gt;book_management_front&lt;/title&gt;
    &lt;link href="/js/about.js" rel="prefetch"&gt;&lt;link href="/js/app.js" rel="preload" as="script"&gt;&lt;link href="/js/chunk-vendors.js" rel="preload" as="script"&gt;&lt;/head&gt;
    &lt;body&gt;
      &lt;noscript&gt;
        &lt;strong&gt;We're sorry but book_management_front doesn't work properly without JavaScript enabled. Please enable it to continue.&lt;/strong&gt;
      &lt;/noscript&gt;
      &lt;div id="app"&gt;&lt;/div&gt;
      &lt;!-- built files will be auto injected --&gt;
    &lt;script type="text/javascript" src="/js/chunk-vendors.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="/js/app.js"&gt;&lt;/script&gt;&lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I know that is html is supposed to show if JavaScript isn't enabled on my browser, but it is. Also, I can see that this HTML is the index.html from the public folder generated by the vueCli, but I fail to understand how it reached the response body.</p>
  
  <p>The code is the following:
  store/index.js</p>
  
  <pre><code>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 =&gt; {
            console.log("request successful: " + response.data)
            context.commit('SET_BOOKS', response.data)
        })
          .catch(error =&gt; {
            console.log("Error on get request: " + error)
          })
      }
    },
    modules: {
    }
  })
  </code></pre>
  
  <p>BookService.js:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>And my view component: the template is just dummy, I'm interested in books computed property.</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;b-container fluid&gt;
        &lt;b-row&gt;
          &lt;b-col&gt;
            &lt;BookElement /&gt;
          &lt;/b-col&gt;
          &lt;b-col&gt;
            &lt;BookElement /&gt;
          &lt;/b-col&gt;
          &lt;b-col&gt;
            &lt;BookElement /&gt;
          &lt;/b-col&gt;
          &lt;b-col&gt;
            &lt;BookElement /&gt;
          &lt;/b-col&gt;
          &lt;b-col&gt;
            &lt;BookElement /&gt;
          &lt;/b-col&gt;
        &lt;/b-row&gt;
      &lt;/b-container&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import BookElement from "@/components/BookElement.vue";
  export default {
    components: {
      BookElement
    },
    created() {
      this.$store.dispatch("fetchBooks");
    },
    computed: {
      books() {
        return this.$store.state.books;
      }
    }
  };
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  &lt;/style&gt;
  </code></pre>