请求失败，状态码 404 错误

Posted 2023-04-15

【中文标题】请求失败，状态码 404 错误

【英文标题】：Request failed with status code 404 error

【发布时间】：2020-09-18 13:22:43

【问题描述】：

我现在正在尝试构建一个 Spotify 网络应用程序。当用户从搜索结果中单击艺术家时，我想显示艺术家的专辑。当我尝试下面的代码时，我得到 Request failed with status code 404。

SingerBox.js

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) => 
  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 = () => 
    axios
      .get(`http://localhost:4000/$id`, 
        params: 
          id: id,
        ,
      )
      .then((res) => 
        console.log(`Returned album data from the server: $res`);
        return <Albums albums=res.data />;
      )
      .catch((err) => console.log(err));
  ;

  return (
    <>
      <Link to=`/albums/$id`>
        <div className="box" onClick=() => handleClick()>
          <div>
            <img className="singer-img" src=singer_img  />
            name
          </div>
        </div>
      </Link>
    </>
  );
;

export default SingerBox;

相册.js

import React,  Component  from "react";
import  useParams  from "react-router-dom";
import axios from "axios";
import AlbumCard from "./AlbumCard";

const Albums = () => 
  const  id  = useParams();

  return (
    <div className="container" style= color: "white" >
      `$id's albums`
    </div>
  );
;

export default Albums;

服务器.js

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) => 
  spotifyApi
    .searchArtists(req.body.keyword)
    .then(function (data) 
      let search_res = data.body.artists.items;
      res.json(search_res);
      res.end();
    )
    .catch((err) => 
      console.log(err);
      res.status(500).send(err);
    );
);

app.get("/albums/:id", (req, res) => 
  console.log(req.params.id);
  spotifyApi.getArtistAlbums(req.params.id).then(function (data) 
    res.json(data.body);
    res.end();
  );
);

app.listen(port, () => console.log(`It's running on port $port`));

我还想知道如何改进代码的结构，例如 axios 调用。它们看起来很乱，但我不知道从哪里开始修复它们。

【问题讨论】：

如果您从浏览器向 Spotify 发出 GET 请求，您是否能够获取响应？

【参考方案1】：

在你试图让 http://localhost:4000/$id 上的 SingerBox 组件中，你的 server.js 文件中没有这样的 API。这就是您遇到 404 错误的原因，这意味着 未找到

  const handleClick = () => 
  axios
  .get(`http://localhost:4000/$id`, 
    params: 
      id: id,
    ,
  )
  .then((res) => 
    console.log(`Returned album data from the server: $res`);
    return <Albums albums=res.data />;
  )
  .catch((err) => console.log(err));
 ;

添加你的 server.js

 app.get("/:id", (req, res) => 
   " your API logic"
  );