Access to XMLHttpRequest at 'http://localhost:8080/home/data' from origin 'http://localhost:3000'

Question

Well I have Backend which a Spring Boot Application with Security. This is how the Security Configuration looks like:

 @Override
protected void configure(HttpSecurity http) throws Exception {

    http.cors()
            .and()
            .authorizeRequests()
            .antMatchers("/home/**")
            .authenticated()
            .and()
            .formLogin()
    .defaultSuccessUrl("/home")
            .and()
            .logout()
            .logoutRequestMatcher(new AntPathRequestMatcher("/logout"))
            .logoutSuccessUrl("/login")
            .invalidateHttpSession(true)        // set invalidation state when logout
            .deleteCookies("JSESSIONID");

For frontend I have a React.js application. If you press on a button at this application a GET request to this url should be executed: 'http://localhost:8080/home/hives

This is my code in React.js getDataAxios(){

     axios.get('http://localhost:8080/home/data', {
        mode: "no-cors",
        auth: {
            username: 'user.user@provider.io',
            password: 'password'
          }
      })
      .then(function (response) {
        console.log(response);
      })
}

The problem is that I am getting this exception on the browser console when pressing the button where this function is executed:

Access to XMLHttpRequest at 'http://localhost:8080/home/data' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Answer 1

Well I have Backend which a Spring Boot Application with Security. This is how the Security Configuration looks like:

 @Override
protected void configure(HttpSecurity http) throws Exception {

    http.cors()
            .and()
            .authorizeRequests()
            .antMatchers("/home/**")
            .authenticated()
            .and()
            .formLogin()
    .defaultSuccessUrl("/home")
            .and()
            .logout()
            .logoutRequestMatcher(new AntPathRequestMatcher("/logout"))
            .logoutSuccessUrl("/login")
            .invalidateHttpSession(true)        // set invalidation state when logout
            .deleteCookies("JSESSIONID");

For frontend I have a React.js application. If you press on a button at this application a GET request to this url should be executed: 'http://localhost:8080/home/hives

This is my code in React.js getDataAxios(){

     axios.get('http://localhost:8080/home/data', {
        mode: "no-cors",
        auth: {
            username: 'user.user@provider.io',
            password: 'password'
          }
      })
      .then(function (response) {
        console.log(response);
      })
}

The problem is that I am getting this exception on the browser console when pressing the button where this function is executed:

Access to XMLHttpRequest at 'http://localhost:8080/home/data' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.