Я создавал приложение MERN и настроил функцию обработчика ошибок, которая отображает сообщения об ошибках всякий раз, когда определенные критерии не выполняются. В моем случае у меня есть страница регистрации, которая требует, чтобы адрес электронной почты был действительным, а также пароль должен быть не менее 6 символов. Сейчас эти сообщения точно отображаются на моей серверной консоли в VS Code, но у меня возникают проблемы с отображением их на консоли моего браузера/интерфейса. Я просмотрел сообщение это SO, но мне так и не удалось решить мою проблему. Я подозреваю, что это потому, что мой интерфейс и серверная часть находятся на разных портах, но я до сих пор не знаю, как это исправить. Код размещен ниже.
Код маршрута
const handleErrors = (err) => {
console.info(err.message, err.code);
let errors = { email: '', password: ''};
//duplicate error code
if (err.code === 11000){
errors.email = "that email is already registered";
}
//Just a way to create custom error messages
if (err.message.includes("Creator validation failed")){
Object.values(err.errors).forEach(({properties}) => {
errors[properties.path] = properties.message;
});
}
return errors;
}
const maxAge = 3 * 24 * 60 * 60;
const createToken = (id) => {
return jwt.sign({ id }, 'efrgvwrtgr435f345secret', {
expiresIn: maxAge
});
}
router.route('/add').post((req,res) => {
const firstName = req.body.firstName;
const lastName = req.body.lastName;
const bio = req.body.bio;
const creatorName = req.body.creatorName;
const password = req.body.password;
const email = req.body.email;
const newCreator = new Creator({firstName, lastName, bio, creatorName, password, email})
newCreator.save()
.then(() => {
const token = createToken(newCreator._id);
res.cookie('jwt', token, { httpOnly: true, maxAge: maxAge * 1000}).json("Token is " + token);
// res.json("New creator added!");
res.send("New creator added!");
})
// .catch((err) => { const errors = handleErrors(err); res.status(404).json({ errors })});
.catch((err) => { const errors = handleErrors(err); res.status(404).send({ errors })});
})
Отправить код действия со страницы регистрации
const handleSubmit = (e) => {
e.preventDefault()
const creator = {
firstName: firstName,
lastName: lastName,
creatorName: creatorName,
bio: bio,
creatorName: creatorName,
password: password,
email: email
}
console.info(creator);
//If there are any errors when the submit btn was clicked, I want those errors to be displayed on the browser's console
try {
axios.post('http://localhost:5000/creators/add', creator, {withCredentials:true}) //Goes to the server('http://localhost:5000/creators/add')
// .then((res) => console.info(res.data))
.then((res) => console.info(res.json));
history.push('/marketplace');
}
catch (err) {
console.info(err);
}
}
Когда вы отправляете ответ с помощью res.status(404).send({ errors })
, вы сообщаете клиенту код ошибки — у Axios есть способ перехватить все коды, которые не попадают в диапазон 200 (ОК). По сути, если с ответом отправляется код ошибки, вы можете увидеть данные об ошибке, используя error.response.data
:
axios.post('http://localhost:5000/creators/add', creator, {withCredentials:true}) //Goes to the server('http://localhost:5000/creators/add')
.then((res) => console.info(res.json))
.catch((error) => {
if (error.response) console.info(error.response.data);
})