react axios request is empty in loadUserByUsername spring security - reactjs

Question

When I send axios put to login, My back-end (Spring Boot) used UserDetails get empty login (""). I thought that, my variables in axios is incorrect. Even I set hardcoded data to check whether the collected data from the form is correct. Unfortunately, I'm still sending an empty string.
const handleSubmit = (event) => {
const axios = require('axios').default;
event.preventDefault();
axios.defaults.withCredentials = true
axios({
method: 'post',
url: 'http://localhost:8080/login',
data: {
'accountLogin': accountLogin,
'passwordAccount': passwordAccount
}
})
.then(function (response) {
console.log(response);
console.log('Good!')
})
.catch(function (error) {
console.log(error);
console.log('error :<')
});
result username in spring UserDetails
[result in my browser]
Spring security configure:
#Override
protected void configure(HttpSecurity http) throws Exception {
http
.cors().and()
.csrf().disable()
.authorizeRequests()
.antMatchers("/", "/login", "/register", "/swagger-ui**").permitAll()
.anyRequest().authenticated()
.and()
.formLogin()
.loginPage("http://localhost:3000")
.defaultSuccessUrl("/index", true)
.and()
.sessionManagement()
.sessionCreationPolicy(SessionCreationPolicy.IF_REQUIRED)
.and()
.logout().permitAll()
.invalidateHttpSession(true);
}

Answer 1

there are several faults in your code and i highly suggest you read the chapter on formLogin in the spring security documentation
You have configured this:
.formLogin()
formLogin means that you are going to use the built in login functionality in spring security. This is a form login, meaning it takes FORM parameters. You are sending your login parameters as JSON which is completely different.
sending form data with fetch
const formData = new FormData();
formData.append('username', accountLogin);
formData.append('password', accountPassword);
axios({
url: "http://localhost:8080/login",
method: "POST",
data: formData
});
Spring security formLogin takes in a usernameand a password per default as form parameters. Not json. And it will create a default login address for you to post the data to at http://localhost:8080/login
.loginPage("http://localhost:3000")
Should be removed. Spring will provide a custom built in login page that will get served if you hit a protected endpoint when you are unauthorized. If you wish to serve a different endpoint, you set this here and make sure that a pake is served there. For instance:
.loginPage("/myCustomLogin")
And then it is up to you to make sure that a login page is served from here otherwise you will get a 404 from spring security.
Depending on how you are packaging your application, if you have a node server for your frontend and a spring server for the backend, then you dont need to use loginPage you just post form data to /login. If you on the otherhand server the loginpage from the spring server, you set loginPage to some value, build an endpoint there, package the html files in the spring server, and write code that will serve the HTML page when you hit that endpoint.

Answer 2

This is a better way of sending post requests with Axios. try this, if it didn't work I guess the problem is with your back-end code.
axios.post('http://localhost:8080/login', {
accountLogin: accountLogin,
passwordAccount: passwordAccount
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});