0

Пишу курсовой проект - веб-приложение (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>
        
        </>
    )
}
6
  • А вы случайно компонент на клиенте не отмонтируете в момент отправки запроса? Серверную часть дебажили, сервер всегда отправляет ответ?
    – SwaD
    10 дек 2022 в 12:41
  • @SwaD если не затруднит, не могли бы вы уточнить, что имеете в виду под "отмонтируете"? Что до сервера, проверяла работу через postman и через логи с выводом запрошенных данных из бд. больше ни на что эрудиции не хватило
    – Xenoniium
    10 дек 2022 в 13:09
  • Отмонтируется - удаляется из DOM. Каждый компонент Реакта представляет из себя какой то узел в DOM дереве. Или например страница после этого перегружается, то браузер прервет выполнение запроса. Если вы раз в Х нажатий получаете ответ, а сервер при этом работает одинаково, то стоит посмотреть, что происходит у вас на стороне клиента при отправке денных(Нажали на кнопку - что происходит далее?). Если форма логина и пароля в отдельном компоненте, который при отправке удаляется или перекидывает пользователя на новую страницу, то браузер может разорвать соединение
    – SwaD
    10 дек 2022 в 13:40
  • @SwaD На данный момент при нажатии на кнопку возвращает Failed to fetch ошибку и сразу же обновляет страницу. Точнее, переходит по ее же пути, но с введенными параметрами. Т.е. есть стартовый компонент с полями, где ввожу логин и пароль, и при нажатии на кнопку с 'localhost:3000' переходит на 'localhost:3000/?userName=admin&password=admin2022' . Вероятно, тут тоже как-то криво получается. Никакой логики перехода с этой страницы на другие намеренно не добавляла, тк с запросами засела.
    – Xenoniium
    10 дек 2022 в 14:20
  • Дополните ваш вопрос компонентом, где у вас форма и обработчик нажатия на кнопку. Скорее всего у вас в form стоит кнопка типа submit и при нажатии происходит переадресация по адресу action в форме. т.е. вы отправляете запрос и страница перегружается.
    – SwaD
    10 дек 2022 в 14:22

1 ответ 1

0

Вариант первый:

Отмените стандартное поведение формы:

const clickLogin = async (e) => {
    e.preventDefault();
    await login(newUser.userName, newUser.password)
}

Вариант второй:

Уберите тег form, он вам не нужен

Вариант третий:

Перенесите кнопку за тег form, тогда не будет срабатывать отправка формы.

Причина вашей ошибки в том, что при нажатии на кнопку, запускалось 2 события: Отправка post запроса и стандартное событие отправки формы(отправка идет на адрес, указанный в атрибуте action, по умолчанию /) с перезагрузкой страницы(а перезагрузка прерывает fetch запрос со стороны клиента)

1
  • Спасибо огромнейшее! Вы меня спасли. Попробовала и второй, и третий вариант: всё работает отлично.
    – Xenoniium
    10 дек 2022 в 15:06

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.