Failed to fetch при POST запросе

Пишу курсовой проект - веб-приложение (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>
        
        </>
    )
}

Ответы (1 шт):

Автор решения: SwaD

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

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

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

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

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

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

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

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

→ Ссылка