javascript - 请求失败,状态码 404 错误
问题描述
我现在正在尝试构建一个 Spotify 网络应用程序。当用户从搜索结果中单击艺术家时,我想显示艺术家的专辑。当我尝试下面的代码时,我收到请求失败,状态码为 404。
歌手盒子.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} alt="Card image" />
{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 调用。它们看起来很乱,但我不知道从哪里开始修复它们。
解决方案
在 SingerBox 组件中,您尝试访问http://localhost:4000/ ${id}在您的 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"
});
推荐阅读
- python-3.x - 有没有一种 Pythonic 方法可以将一个字典映射到另一个字典?
- javascript - 用于生成树的 Javascript 递归函数 async-await
- python-3.x - Autopep8 可以在语法中支持 `source python django` 吗?
- opencv - 将turtle和opencv视频窗口拼接在一起
- c# - 使用 Gmail OAuth2 C# 发送邮件
- php - 如何让 Browser-Sync 在 Gulp 4 中提供 PHP 文件
- c# - 使用 Xamarin.Forms.Map 未显示标签和引脚
- c# - Nuget 管理器不使用包管理器从 Internet 安装包
- sql - 递归 CTE 填充多个季度的最新可用数据?
- amazon-web-services - AWS 组织中的 Cloudtrail 显式拒绝失败