title: Axios GET request failed with status code 404
body: <p>I am trying to build (with <code>vue.js</code>) a blog/articles app which uses <code>axios</code> to request data from my <code>db.json</code> file with a <code>get request</code>. I want it to show the data from that article once it has been clicked on from the main articles list ==&gt; I use the <code>id prop</code> so that it knows which article's data to get. Here I call my get request (the get request is in another file, keep reading).</p>
  <pre><code>ArticleShow.vue
  &lt;script&gt;
  import APIService from &quot;@/APIService.js&quot;;
  export default {
    props: [&quot;id&quot;],    // &quot;id&quot; has been passed as a prop when I import this file to its parent
    data() {
      return {
        article: {}
      };
    },
    created() {
      APIService.getArticle(this.id).then(response =&gt; {
        this.article = response.data;
      });
    }
  };
  &lt;/script&gt;
  </code></pre>
  <p>This is the axios GET request that I use (it's inside the APIService.js file)</p>
  <pre><code>APIService.js
  import axios from &quot;axios&quot;;
  
  const apiClient = axios.create({
    baseURL: &quot;http://localhost:5000&quot;,
    withCredentials: false,
    headers: {
      Accept: &quot;application/json&quot;,
      &quot;Content-Type&quot;: &quot;application/json&quot;
    }
  });
  
  export default {
    getArticle(id) {
      return apiClient.get(&quot;/articles/&quot; + id);
    }
  }
  </code></pre>
  <p>I thought this code would work, but in my browser I get the following error:</p>
  <pre><code>GET http://localhost:5000/articles/undefined 404 (Not Found)
  Uncaught (in promise) Error: Request failed with status code 404
      at createError (createError.js?2d83:16)
      at settle (settle.js?467f:17)
      at XMLHttpRequest.handleLoad (xhr.js?b50d:62)
  </code></pre>
  <p>I tried catching the error, but I couldn't get any useful information about where it was coming from and how I could fix it. I figured it might be the <code>id prop</code> that was causing the issue but not sure. In the parent of the <code>ArticleShow</code> component I define the <code>id prop</code> when displaying <code>ArticleShow</code> in a router-link.</p>
  <pre><code>ArticleCard.vue
  &lt;router-link
        class=&quot;article-link&quot;
        :to=&quot;{ name: 'ArticleShow', params: { id: article.id } }&quot;
        :article=&quot;this.article&quot;
      &gt;
  </code></pre>
  <p>And then again in the parent of <code>Articlecard.vue</code> (the previous component)</p>
  <pre><code>Home.vue
  &lt;ArticleCard
        v-for=&quot;article in articles&quot;   // I imported *articles* from the vuex store
        :key=&quot;article.id&quot;
        :article=&quot;article&quot;
        class=&quot;ArticleCard&quot;
  &gt;&lt;/ArticleCard&gt;
  </code></pre>
  <p>Still not sure if the <code>id prop</code> is really the root of the problem here. Anyway, please help if you can on this issue as it has gone on for quite a while, any help is greatly appreciated.</p>