MERN Stack 博客集成错误：“SyntaxError：意外的标记 '<' is not valid JSON" in Console

Question

我有一个个人投资组合网站，我正在我的投资组合中集成一个博客，我使用 MERN 堆栈制作，我收到错误 “语法错误：控制台中出现意外标记 '<', "”

以下是项目的git仓库的链接

Priyanshu 组合 - GitHub

以下是代码块，您可以参考快速查看

前端获取

useEffect(() => {
    const fetchBlogs = async () => {
      try {
        const url = `${host}/blog/blogs`;
        const response = await fetch(url, {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
            "authtoken": localStorage.getItem("token")
          },
        });
        const allblogs = await response.json();
        setBlogs(allblogs);
        setLoading(false);
        extractUniqueTags(allblogs);
      } catch (error) {
        console.error('Error fetching blogs:', error.message);
        setLoading(false);
      }
    };

    fetchBlogs();
    // eslint-disable-next-line
  }, []);

后台发送

router.get('/blogs', async (req, res) => {
    try {
        const blogPosts = await BlogPost.find();
        res.json({blogPosts: blogPosts});
    } catch (error) {
        res.status(500).send("Some Error occurred");
    }
});

Answer 1

看起来您的响应是 HTML 格式，而不是 JSON 格式。 如果请求由于某种原因失败（例如，获取 404 而不是 JSON），则可能会发生这种情况。 一旦承诺履行，尝试仅 console.log() 响应并查看实际响应是什么。