【发布时间】:2018-07-09 20:12:02
【问题描述】:
前端,使用 React
async callAPI() {
const data = { username: "eric", password: "password" };
const response = await fetch("/login", {
method: "post",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(data)
});
console.log(response);
const body = await response.json();
console.log(body);
return body;
}
后端,使用 express
app.post("/login", (req, res) => {
console.log(req.body);
let userN = User.findOne(
{ username: req.body.username, password: req.body.password },
(err, doc) => {
console.log(doc);
res.send({
username: doc.username,
password: doc.passsword,
recipeBook: doc.recipeBook
});
}
);
});
当我到达终点时,
console.log(req.body)
在我的快速代码中,我最终得到了“未定义”,因此似乎提取实际上并未将数据发送到我的后端。在我的前端,我最终得到了这个错误,
SyntaxError: Unexpected token < in JSON at position 0
为什么它不向我的后端发送数据?我还应该使用 Axios 之类的库来进行后端和前端之间的通信,而不是使用 fetch api 吗?最后,为什么后端有不同的方法,比如“get”和“post”?为什么“post”是唯一允许有 req.body 的方法,而“get”不是?
【问题讨论】:
-
您在“网络”选项卡中看到了什么?
-
您使用的是什么版本的 Express?如果我没记错的话,Express 在 4.16.0 中开始使用自动正文解析,所以如果您有早期版本,则必须使用正文解析器中间件。
-
对于最后一个问题,了解 HTTP 的工作原理及其不同动词/方法的含义很重要。 MDN has a decent listing to start from。对于其余部分,请将自己限制在问题中的一个问题上。目前对于单一答案来说太宽泛了。最后,搜索该错误会发现有关 Stack Overflow 的许多问题。例如,"SyntaxError: Unexpected token < in JSON at position 0" in React App
-
如果你还没有包含正文解析器,也不要忘记包含。 npmjs.com/package/body-parser
标签: javascript reactjs express