无法在 MERN 项目中将请求从客户端发送到服务器端

Question

在进行个人项目时，一切都很好。 但不幸的是我遇到了一个特殊的问题，因为我无法找出这个问题背后的原因。 请让我描述一下问题。 这是我试图从前端向其发送请求的后端点。

router.get("/profile/:username", async (req, res) => {
    try {
        const user = await User.findOne({ username: req.params.username })
        const posts = await Post.find({ userId: user._id })
        req.status(200).json(posts)
    } catch (err) {
        res.status(500).json(err);
    }
})

这是我尝试发送请求的前端点

useEffect(() => {
    const fetchPosts = async () => {
      const res = username
        ? await axios.get("posts/profile/"+username)
        : await axios.get("posts/timeline/638b46766863c22bd1c7e242")
      setPosts(res.data)
    }
    fetchPosts()
  }, [username])

username来自另一个我写的文件<Feed username={"Shibly"}/> 。 我想从localhost:3000/api/posts/profile/Shibly获取数据，但出现404错误。

这是网络选项卡的屏幕截图。

请注意， await axios.get("posts/timeline/638b46766863c22bd1c7e242")工作正常。

请有人帮助我。 提前致谢。

Answer 1

首先，您正在从我从您的网络选项卡中看到的前端访问这个 API 端点。 请检查此 API 端点在后端是否存在。

http://localhost:3000/profile/posts/profile/Shibly

此外，您可以将这种方式用于前端的动态路由

useEffect(() => {
    const fetchPosts = async () => {
      const res = username
        ? await         axios.get(`posts/profile/:${username}`)
        : await axios.get("posts/timeline/638b46766863c22bd1c7e242")
      setPosts(res.data)
    }
    fetchPosts()
  }, [username])