"Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0" ERROR -- NodeJS, MongoDB, React Application

Question

我正在尝试从我的 React 应用程序的用户数据库中获取一个数组。我得到的响应是一个 HTML 文件，但我不确定为什么它不起作用，因为我有相同的代码可以完美地用于非数组元素。这是代码：

客户：

  async function populateFavorite() {
    const req = await fetch("http://localhost:3001/api/favorite", {
      headers: {
        "x-access-token": localStorage.getItem("token"),
      },
    });

    const data = await req.json();
    if (data.status === "ok") {
      console.log(data.watchlist)
    } else {
      alert(data.error);
    }
  }

目前，它似乎没有通过这里：

const data = await req.json();

服务器：


app.get('/api/favorite', async (req, res) => {
    const token = req.headers['x-access-token']

    try {
        const decoded = jwt.verify(token, '<key>')
        const email = decoded.email
        const user = await User.findOne({ email: email })

        return res.json({ status: 'ok', watchlist: user.watchlist })
    } catch (error) {
        console.log(error)
        res.json({ status: 'error', error: 'invalid token' })
    }
})

这是数据库中数据的样子：

{"_id":{"$oid":"627306d86089cb6e720e0e8a"},
"firstName":"Ailany",
"email":"testing@orbit.com",
"coins_owned":[],
"watchlist":["Bitcoin","Serum"],
"dateCreated":{"$date":{"$numberLong":"1651705560381"}},
"__v":{"$numberInt":"0"}

目标是在呈现网站时让客户端接收用户监视列表中的项目数组，然后将它们单独呈现在列表中。

如有任何帮助，我们将不胜感激！

Answer 1

Express 在定义路由时使用优先级。我将以下代码放在我所有的获取路线之上，因此覆盖了它们。

app.get("*", function (request, response) {
  response.sendFile(path.resolve(__dirname, "../frontend/build", "index.html"));
});

解决方案：

我将这些代码行移到了底部，以便其他路线优先。现在，我在响应中得到 JSON 而不是 index.html.

"Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0" ERROR -- NodeJS, MongoDB, React Application

"Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0" ERROR -- NodeJS, MongoDB, React Application

node.js

reactjs

express

mongoose

jwt