Axios GET request failed with status code 404

Question

I am trying to build (with vue.js ) a blog/articles app which uses axios to request data from my db.json file with a get request . I want it to show the data from that article once it has been clicked on from the main articles list ==> I use the id prop 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).

ArticleShow.vue
<script>
import APIService from "@/APIService.js";
export default {
  props: ["id"],    // "id" has been passed as a prop when I import this file to its parent
  data() {
    return {
      article: {}
    };
  },
  created() {
    APIService.getArticle(this.id).then(response => {
      this.article = response.data;
    });
  }
};
</script>

This is the axios GET request that I use (it's inside the APIService.js file)

APIService.js
import axios from "axios";

const apiClient = axios.create({
  baseURL: "http://localhost:5000",
  withCredentials: false,
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json"
  }
});

export default {
  getArticle(id) {
    return apiClient.get("/articles/" + id);
  }
}

I thought this code would work, but in my browser I get the following error:

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)

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 id prop that was causing the issue but not sure. In the parent of the ArticleShow component I define the id prop when displaying ArticleShow in a router-link.

ArticleCard.vue
<router-link
      class="article-link"
      :to="{ name: 'ArticleShow', params: { id: article.id } }"
      :article="this.article"
    >

And then again in the parent of Articlecard.vue (the previous component)

Home.vue
<ArticleCard
      v-for="article in articles"   // I imported *articles* from the vuex store
      :key="article.id"
      :article="article"
      class="ArticleCard"
></ArticleCard>

Still not sure if the id prop 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.

Answer 1

Error 404 means this URL doesn't exist: http://localhost:5000/articles/undefined

So this means you haven't passed any id prop to ArticleShow component