react не отправляет post запрос для авторизации

Question

На сервере DRF api для авторизации отлично работает (использую jwt). Но когда пытаюсь сделать то же самое с реакта, мне пишет Cannot POST /login. На сервере нет информации о post запросе, т.е. проблема именно с фронтендом.

const Login = () => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [error, setError] = useState('');

    const loginUser = async () => {
        try {
            const response = await axios.post('http://127.0.0.1:8000/api/v1/token/', { username, password });
            localStorage.setItem('access', response.data.access);
            localStorage.setItem('refresh', response.data.refresh);
            setError('');
        } catch (err) {
            setError(err.response.data.message);
        }
    };

    return (
        <div>
            <form class="form_auth_style" method="post">
                <div class="form-group">
                    <input class="form-control item" type="text" name="username" placeholder="Логин" required />
                </div>
                <div class="form-group">
                    <input class="form-control item" type="password" name="password" placeholder="Пароль" required />
                </div>
                <div class="form-group">
                    <button class="btn btn-primary btn-block create-account" type="submit">Вход в аккаунт</button>
                </div>
            </form>
        </div>
    );
};

export default Login;

Answer 1

Проблемы с запросом на /login

У браузеров есть поведение формы по умолчанию, когда он пытается слать запросы на указанные адреса.

<form action="/api/login" method="get" class="form-example"></form>

Если action не указан, то он посылает данные не текущую страницу, отсюда вы видите лишний запрос по пути /login. Чтобы браузер себя так не вел, обычно это поведение отключают.

<form onSubmit={(e) => e.preventDefault()}>

Ну или просто не использовать тег формы, если данные обрабатываются кодом.

Взаимодействие в React надо явно указывать

У вас сейчас там чистая верстка и код с ним никак не взаимодействует. Если это клик по кнопке, то его надо обрабатывать.

<button 
    class="btn btn-primary btn-block create-account" 
    onClick={loginUser}>
        Вход в аккаунт
</button>

Тоже самое с полями, надо явно указывать, куда положить данные, отсюда данные формы уходят пустые.

<input 
    class="form-control item" 
    type="text" 
    name="username" 
    placeholder="Логин" 
    required 
    value={username} 
    onChange={(e) => setUsername(e.target.value)} />

<input 
    class="form-control item" 
    type="password" 
    name="password" 
    placeholder="Пароль" 
    required 
    value={password} 
    onChange={(e) => setPassword(e.target.value)} />

БЛОГ НА HUSL

react не отправляет post запрос для авторизации

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