Реакция аксиос запроса на проблему аутентификации REST-сервера Spring Boot

Question

Я пытаюсь отправить почтовый запрос axios на сервер, используя в качестве параметров имя пользователя и пароль, указанные в форме. Когда я отправляю запрос, кажется, что он отправляется два раза, один с username = "", а другой раз с именем пользователя, которое я предоставил. Ответ - ошибка входа в систему из-за того, что первый раз запрос был отправлен.

Я попытался отправить запрос, используя axios.post, который не работает (имя пользователя, полученное на сервере, пусто. Также я сделалотправьте запрос, используя почтальон, и это сработало (имя пользователя - это то, что я указал в теле формы, и аутентификация прошла успешно).

Это моя форма входа в класс реакции

import React, {Component} from 'react'
import axios from 'axios'
import './LoginForm.css'

class LoginForm extends Component{

    constructor(props){
        super(props);
        this.state = {
            username : '',
            password : ''
        };

        this.handleRequest = this.handleRequest.bind(this);
    }
    handleRequest = async () => {
        const response = await axios({
            method: 'post',
            url: 'http://localhost:9090/login',
            auth: {
                username: this.state.username,
                password: this.state.password
            }
        });
        console.log(response);
    };


    render() {
        return (
            <div className="login-page">
                <div className="form">
                    <form  className="login-form">
                        <input type="text" name={'username'} value={this.state.username} onChange={(e) => {this.setState({username: e.target.value})}} placeholder="username"/>
                        <input type="password" name={'password'} value={this.state.password} onChange={(e) => {this.setState({password: e.target.value})}} placeholder="password"/>
                        <button type={'button'} onClick={this.handleRequest}>login</button>
                    </form>
                </div>
            </div>
        );
    }
}

export default LoginForm;

loadByUsername вСлужба

@Override
    public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {
       Optional<User> user = userRepository.findByUserName(username);
        if (user.isPresent()) {
            return new MyUserPrincipal(user.get());
        } else {
            throw new UsernameNotFoundException("Unknown user");
        }
    }

Я заполняю поля формы, и когда я нажимаю «Войти», я установил точку останова в методе loadByUsername выше и первый параметр имени пользователя «», и после того, как я нажму F9, чтобы продолжить, метод каким-то образомвызывается снова и снова останавливается в точке останова, но теперь имя пользователя - это то, которое я заполнил в форме, но ответом является сообщение об ошибке входа в систему, как если бы имя пользователя и пароль были неправильными

Answer 1

Я думаю, что запрос axios должен выглядеть следующим образом:

const response = await axios({
    method: 'post',
    url: 'http://localhost:9090/login',
    data: {
        username: this.state.username,
        password: this.state.password
    }
});

или

const response = await axios.post('http://localhost:9090/login',{
      username: this.state.username,
      password: this.state.password
 });