Access database information from Strapi Plugin Admin Panel

I am following this tutorial in order to fetch my existing data to display in this page.

However, using the axiosInstance provided in utils could not give me the information (404).
I also tried appending /api in front of the URL path, and it still doesn’t work with 401 error and I always went back to log in page whenever I open the plugin page.

Any suggestions on how to make this work?

Related code snippets:

// /plugins/plugin-name/admin/src/api/submissions.js
import axiosInstance from "../utils/axiosInstance"

export const getSubmission = async () => {
  const response = await axiosInstance({
    method: "GET",
    url: "api/submissions/87",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
    },
  })
  return response.data;
}
// plugins/plugin-name/admin/src/pages/HomePage/index.js

import React from "react";
// import PropTypes from 'prop-types';
import { HeaderLayout, Layout, Typography } from "@strapi/design-system";
import { getSubmission } from "../../api/submissions";

const HomePage = () => {
  const [state, setState] = React.useState();
  React.useEffect(() => {
    getSubmission()
      .then((response) => {
        console.log(response);
        setState(response.data);
      })
      .catch((error) => console.error(error));
  });

  return (
    <Layout>
      <HeaderLayout title="Submission" subtitle="Description" />
      <Typography>{JSON.stringify(state)}</Typography>
    </Layout>
  );
};

export default HomePage;
System Information
  • Strapi Version: 4.5.4
  • Operating System: Max OS X Ventura
  • Database: Sqlite
  • Node Version: 16.18.1
  • NPM Version: 8.19.2
  • Yarn Version: 1.22.19