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);
}

CodePudding user response：

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. As pointed out before, Spring Security places a login at the path /login but if you wish to override this and build a custom login endpoint to post to, you define a new path here example:

.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.

CodePudding user response：

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);
  });