title: Request failed with status code 404 error
body: <p>I'm trying to build a Spotify web app now. I'd like to display an artist's albums when an user clicks the artist from its search result. When I try the code below, I get Request failed with status code 404. </p>
  
  <p>SingerBox.js</p>
  
  <pre><code>import React, { Component } from "react";
  import Modal from "react-bootstrap/Modal";
  import ImageNotFound from "../../ImageNotFound.jpg";
  import "../../App.css";
  import { Link } from "react-router-dom";
  
  import Albums from "../Albums/Albums";
  import axios from "axios";
  
  const SingerBox = (props) =&gt; {
    const { images, name, id } = props;
  
    //check if the image array is empty since some artists' image data provided by the API call are empty
    const singer_img = images.length === 0 ? ImageNotFound : images[0].url;
  
    const handleClick = () =&gt; {
      axios
        .get(`http://localhost:4000/${id}`, {
          params: {
            id: id,
          },
        })
        .then((res) =&gt; {
          console.log(`Returned album data from the server: ${res}`);
          return &lt;Albums albums={res.data} /&gt;;
        })
        .catch((err) =&gt; console.log(err));
    };
  
    return (
      &lt;&gt;
        &lt;Link to={`/albums/${id}`}&gt;
          &lt;div className="box" onClick={() =&gt; handleClick()}&gt;
            &lt;div&gt;
              &lt;img className="singer-img" src={singer_img} alt="Card image" /&gt;
              {name}
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/Link&gt;
      &lt;/&gt;
    );
  };
  
  export default SingerBox;
  
  </code></pre>
  
  <p>Albums.js</p>
  
  <pre><code>import React, { Component } from "react";
  import { useParams } from "react-router-dom";
  import axios from "axios";
  import AlbumCard from "./AlbumCard";
  
  const Albums = () =&gt; {
    const { id } = useParams();
  
    return (
      &lt;div className="container" style={{ color: "white" }}&gt;
        {`${id}'s albums`}
      &lt;/div&gt;
    );
  };
  
  export default Albums;
  
  </code></pre>
  
  <p>Server.js</p>
  
  <pre><code>const express = require("express");
  const SpotifyWebApi = require("spotify-web-api-node");
  const bodyParser = require("body-parser");
  const cors = require("cors");
  const app = express();
  const port = 4000 || process.env.PORT;
  
  require("dotenv").config();
  
  app.use(express.json());
  app.use(cors());
  app.use(bodyParser.urlencoded({ extended: true }));
  
  // Create the api object with the credentials
  var spotifyApi = new SpotifyWebApi({
    clientId: process.env.CLIENT_ID,
    clientSecret: process.env.CLIENT_SECRET,
  });
  
  // Retrieve an access token.
  spotifyApi.clientCredentialsGrant().then(
    function (data) {
      console.log("The access token expires in " + data.body["expires_in"]);
  
      // Save the access token so that it's used in future calls
      spotifyApi.setAccessToken(data.body["access_token"]);
    },
    function (err) {
      console.log("Something went wrong when retrieving an access token", err);
    }
  );
  
  app.post("/search_result", (req, res) =&gt; {
    spotifyApi
      .searchArtists(req.body.keyword)
      .then(function (data) {
        let search_res = data.body.artists.items;
        res.json(search_res);
        res.end();
      })
      .catch((err) =&gt; {
        console.log(err);
        res.status(500).send(err);
      });
  });
  
  app.get("/albums/:id", (req, res) =&gt; {
    console.log(req.params.id);
    spotifyApi.getArtistAlbums(req.params.id).then(function (data) {
      res.json(data.body);
      res.end();
    });
  });
  
  app.listen(port, () =&gt; console.log(`It's running on port ${port}`));
  </code></pre>
  
  <p>I also want to know how I can improve the structure of my codes, like axios calls. They seem messy but I don't know where to start to fix them.</p>