axios 我得到一个错误:请求失败,状态代码为404请求失败,状态代码404

qhhrdooz  于 2023-10-18  发布在  iOS
关注(0)|答案(1)|浏览(158)

我是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"",但没有帮助。
我已经重新启动后端和前端多次,不工作,显示相同的错误

3phpmpom

3phpmpom1#

从您提供的图像来看,axios请求似乎要发送到您的前端应用程序(试图获取不存在的路由)。
您可以尝试直接使用API URL更改axios.get(),以方便您的测试

const res = await axios.get("http://localhost:8800/api/posts/timeline/64e31eb40a9c1595ef8f425b");

稍后,您可以改进代码,为Axios客户端提供默认配置作为示例的一部分

// Set config defaults when creating the instance
const instance = axios.create({
  baseURL: 'https://api.example.com'
});

// Alter defaults after instance has been created
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

然后在Feed组件中,

instance.get('/posts/timeline')

相关问题