Пишу курсовой проект - веб-приложение (Node.js, express, React, Postgre). В процессе понадобилось добавить в проект авторизацию, столкнулась с проблемой еще на этапе организации POST-запросов:
запрос успешно уходит на сервер, на сервере по логину находится пользователь в БД, определяется для него токен (по логам на сервере - до этого момента все в порядке), но ответ с сервера на клиент корректный приходит (в лучшем случае) попытки с 10 ввести логин и пароль.
В остальное время выбрасывается "TypeError: Failed to fetch", а статус запроса - "отменен".
Запрос на клиенте:
export const login = async (login, password) => {
let data
try{
const response=await fetch('http://localhost:5000/api/user/login', {
method: 'POST',
body: JSON.stringify({
login: login,
password: password
}),
headers: {
'Content-Type': 'application/json;charset=utf-8'
}
})
data = await response.json()
if(!response.ok) {
throw new Error(data.message || 'Error')
}
console.log(data)
} catch (error) {
console.error(error)
}
return (data)
}
Обработка на сервере:
async login(req, res) {
try{
const {login, password} = req.body
const user = await User.findOne({where: {login}})
if (!user) {
return res.json({ message: 'Пользователь не найден' })
}
let comparePassword = bcrypt.compareSync(password, user.password)
if (!comparePassword) {
return res.json({ message: 'Указан неверный пароль'})
}
const accountType = user.login === "admin" ? true : false
const token =jwt.sign(
{
login: user.login,
accountType:accountType
},
"TEST_KEY",
{expiresIn: '24h'}
)
console.log(token)
return res.json({token})
}
catch (e) {
console.log("error")
console.log(e)
}
}
POST-запрос на добавление новых пользователей работает аналогично: в БД пользователь записывается, а при попытке вернуть с сервера что-то вроде response.status(201).json({message: 'Пользователь создан'})
- снова "Failed to fetch".
С Get-запросами подобной проблемы не возникает. Не знаю, как добиться стабильности работы запросов: никак не могу понять, какая закономерность в случаях, когда ответ до клиента все-таки доходит, а когда - нет. Была бы катастрофически благодарна за помощь
Компонент с формой
export const ClientMain = () => {
const [newUser, setNewUser] = useState({
userName: "",
password: "",
})
const changeNewUserHandler = (event) => {
setNewUser({ ...newUser, [event.target.name]: event.target.value })
}
let checkInput = (() => {
let isDisabled = document.getElementById("password") && document.getElementById("userName")
? !(
document.getElementById("password").checkValidity() &&
document.getElementById("userName").checkValidity()
)
: true
return isDisabled
})
const clickLogin = async () => {
await login(newUser.userName, newUser.password)
}
return (
<>
<div id="loginCard" className="modal-main">
{/* <div className="modal-content" id="modal-content"> */}
<div className="window-user">
<form className="fields-user" id="window">
<input
className="input-user"
placeholder="Логин"
type="text"
id="userName"
name="userName"
value={newUser.userName}
onChange={changeNewUserHandler}
required
pattern="^.{4,16}$"
/>
<input
className="input-user"
placeholder="Пароль"
type="text"
id="password"
name="password"
value={newUser.password}
onChange={changeNewUserHandler}
required
pattern="^.{8,16}$"
/>
<div className="errorsBox">
<p className="errorMessage-main" id="errorLogin">
Логин должен содержать от 4 до 16 символов.
</p>
<p className="errorMessage-main" id="errorPassword">
Пароль должен содержать от 8 до 16 символов.
</p>
</div>
<input
type="submit"
className="addButton"
value="Войти"
disabled={checkInput()}
onClick={clickLogin}
></input>
</form>
</div>
</div>
</>
)
}