如何在react中使用fetch呈现来自node.js的错误

Question

我的应用程序有一个登录页面，当用户输入正确的登录凭据时工作正常，但是当测试用户名或密码的最终错误条目时，我意识到我的catch块无法从后端正确格式化错误对象，因此没有任何内容被呈现到前端。

我试过在后端使用res.send(401).json({"message":"Unauthorized"});而不是res.sendStatus(401);，但前一种方法不会触发错误响应，而是在获取中作为响应返回。

在使用res.sendStatus(401);时，虽然错误被触发，但我的catch块无法呈现它的响应。

后端:

const User = require('../model/User');
const jwt = require('jsonwebtoken');
const bcrypt = require('bcrypt');
const handleLogin = async (req,res) => {
const user = req.body.user.toLowerCase();
const pwd = req.body.pwd;
if(!user || !pwd) return res.sendStatus(400);
const foundUser = await User.findOne({username: user}).exec();

if(!foundUser) return res.sendStatus(401);
const match = await bcrypt.compare(pwd, foundUser.password);
console.log(match);
if(match){
const roles = Object.values(foundUser.roles);
const accessToken = jwt.sign(
{"userInfo": {
"username": foundUser.username,
"roles": roles
}},
process.env.ACCESS_TOKEN,
{expiresIn: "300s"}
);
const refreshToken = jwt.sign(
{"username": foundUser.username},
process.env.REFRESH_TOKEN,
{expiresIn: "1d"}
);

foundUser.refreshToken = refreshToken;
const result = await foundUser.save();
if(!result) return res.status(500);

res.cookie("jwt",refreshToken,{httpOnly: true, sameSite: "None", maxAge: 24*60*60*1000});  
res.json({user, roles, accessToken});
}
else{
res.sendStatus(401);
}   
}
module.exports = {handleLogin};

fetch:

fetch(BASE_URL + "/login", {

method: "POST",
headers: {
"Content-Type":"application/json"
},
body: JSON.stringify({user: username,pwd})
})
.then(res => res.json())
.then(data => {
setUser(data);
console.log(data);
})
.then(() => {
setSuccess(true);
setTimeout(() => {
navigate("/");
}, 1000);
})
.catch((err)=>{
console.log(err);
if(err.status == "401"){
setErrMsg("Wrong username or password.")
}
else{
setErrMsg("Login failed, try again.")
}
errRef.current.focus();
})

一旦错误被触发，控制台显示以下错误SyntaxError: Unexpected token 'U', "Unauthorized" is not valid JSON，除此之外，该错误不呈现给前端。

如何从后端正确格式化响应或处理来自前端的错误响应，以便能够正确地将其呈现给视图?

Answer 1

您的第一个then假设响应具有有效的json。相反，它应该检查响应状态是否为ok，如果不是，抛出一个将被catch捕获的错误。

.then(res => {
if (res.ok) {
return res.json();
}
throw new Error(res.status);
})