我是React的新手,并试图通过教程react social使用React,Express,MongoDB和Node以及Axios从后端获取数据。我有一个组件Feed
来获取用户和他关注的用户发布的所有帖子。Feed
组件在主页(localhost:3000)中工作良好,显示了正确的帖子,但是当我转到也使用Feed
的个人资料页面(localhost:3000/post/username)时,我得到了错误请求失败,状态代码为404 AxiosError:请求失败,状态代码为404。
在浏览器控制台中,它显示:Axois Error
它似乎向端口3000发出了GET请求,这是React端口,但服务器端口是8800。只是有点奇怪
下面是我的Feed
组件:
import { useEffect, useState } from 'react';
import Post from "../post/Post";
import Share from "../share/Share";
import "./feed.css";
import axios from "axios";
// axios.defaults.baseURL = 'http://localhost:8800/api/';
export default function Feed() {
const [posts, setPosts] = useState([]);
useEffect(() => {
const fetchPosts = async () => {
const res = await axios.get("posts/timeline/64e31eb40a9c1595ef8f425b");
setPosts(res.data);
}
fetchPosts();
}, []);
return (
<div className="feed">
<div className="feedWrapper">
<Share />
{posts.map((p) => (
<Post key={p._id} post={p} />
))}
</div>
</div>
)
}
这是后端:
//get timeline a posts
router.get("/timeline/:userId", async (req, res) => {
try {
const currentUser = await User.findById(req.params.userId);
const userPosts = await Post.find({ userId: currentUser._id });
const friendPosts = await Promise.all(
currentUser.followings.map((friendId) => {
return Post.find({ userId: friendId });
})
);
res.status(200).json(userPosts.concat(...friendPosts));
} catch (err) {
res.status(500).json(err);
}
});
感谢您的帮助!!
我在package.json中使用了"proxy": "http://localhost:8800/api"
,并尝试设置"axois.defaults.baseURL="http://localhost:8800/api""
,但没有帮助。
我已经重新启动后端和前端多次,不工作,显示相同的错误
1条答案
按热度按时间3phpmpom1#
从您提供的图像来看,
axios
请求似乎要发送到您的前端应用程序(试图获取不存在的路由)。您可以尝试直接使用API URL更改axios.get(),以方便您的测试
稍后,您可以改进代码,为Axios客户端提供默认配置作为示例的一部分
然后在
Feed
组件中,