Reactjs 对Spring引导REST服务器身份验证问题响应axios请求

我试图向服务器发送一个axios post请求，该请求的参数为表单中提供的用户的用户名和密码。当我发送请求时，它似乎被发送了两次，一次是用户名=”，另一次是我提供的用户名。由于第一次发送请求，因此响应为登录错误

我尝试使用axios.post发送请求，但该请求不起作用（服务器上收到的用户名为空。此外，我使用postman发送了一个post请求，该请求起作用（用户名是我在表单正文中提供的，身份验证成功）

这是我在react中的登录表单

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;

import React，{Component}来自“React”
从“axios”导入axios
导入“./LoginForm.css”
类LoginForm扩展组件{
建造师（道具）{
超级（道具）；
此.state={
用户名：“”，
密码：“”
};
this.handleRequest=this.handleRequest.bind（this）；
}
handleRequest=async（）=>{
常数响应=等待axios({
方法：“post”，
网址：'http://localhost:9090/login',
认证：{
用户名：this.state.username，
密码：this.state.password
}
});
控制台日志（响应）；
};
render（）{
返回(
{this.setState（{username:e.target.value}}}占位符=“用户名”/>
{this.setState（{password:e.target.value}}}}占位符=“password”/>
登录
);
}
}
导出默认登录信息；

服务中的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");
        }
    }

@覆盖
public UserDetails loadUserByUsername（字符串用户名）引发UsernameNotFoundException{
可选用户=userRepository.findByUserName（用户名）；
if（user.isPresent（））{
返回新的MyUserPrincipal（user.get（））；
}否则{
抛出新用户名NotFoundException（“未知用户”）；
}
}

---

我填写表单字段，当我按login时，我在上面的loadByUsername方法中设置了一个断点，第一次参数username为“”在我按F9键继续后，该方法不知何故再次被调用，并在断点处再次停止，但现在用户名是我在表单中填写的用户名。但响应是登录错误消息，好像用户名和密码不正确

我认为axios请求应该如下所示：

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

或

---

如果您找到了解决方案，您介意发布它吗！在我的用户名为“”的情况下遇到了相同的问题，并且在我的post请求中声明了参数和匹配的参数后。。

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