Axios GET 請求失敗，狀態碼為 404

Question

我正在嘗試構建（使用vue.js ）一個博客/文章應用程序，該應用程序使用axios從我的db.json文件中請求數據，並帶有get request 。 一旦從主文章列表中單擊它，我希望它顯示該文章的數據==>我使用id prop ，以便它知道要獲取哪篇文章的數據。 在這里，我調用了我的 get 請求（get 請求在另一個文件中，請繼續閱讀）。

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>

這是我使用的 axios GET 請求（在 APIService.js 文件中）

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);
  }
}

我認為這段代碼可以工作，但在我的瀏覽器中出現以下錯誤：

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)

我試圖捕捉錯誤，但我無法獲得任何有用的信息，說明它來自哪里以及如何修復它。 我認為這可能是導致問題的id prop ，但不確定。 在ArticleShow組件的父級中，我在路由器鏈接中顯示ArticleShow時定義了id prop屬性。

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

然后再次在Articlecard.vue的父級中（前一個組件）

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

仍然不確定id prop是否真的是問題的根源。 無論如何，如果你能解決這個問題，請提供幫助，因為它已經持續了很長時間，非常感謝任何幫助。

Answer 1

錯誤 404 表示此 URL 不存在： http://localhost:5000/articles/undefined

所以這意味着你沒有將任何id道具傳遞給ArticleShow組件