POST 403 Forbidden Error with Spring Boot and Vue/Axios Frontend

Frontend and Backend Development
1

Encountering a 403 error when sending login data via Vue and Axios to a Spring Boot service. Check your CORS and security filters.

@Configuration
@EnableWebSecurity
public class CustomSecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors().and().csrf().disable()
            .authorizeRequests()
            .antMatchers("/api/login").permitAll()
            .anyRequest().authenticated();
    }

    @Bean
    public CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedOrigin("*");
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return source;
    }
}
2

i had a simlar issue - i ended up reordering my secuity settings & ensuring axios was set to withcredentials. also check your custom headers match the server config, coz sometimes a slight misconfig can throw a 403 error.

3

hey all, i noticed sometimes axios isn’t set for withcredientials and that can be an issue. did anyone try tweaking the cors config or headers further? im curious if others faced a similar hiccup and how u resolved it

4

I have encountered a similar issue previously. In my experience, the problem was related to additional filters inadvertently blocking some requests. I resolved this by carefully reviewing the filter chain and ensuring that the login endpoint was excluded from unnecessary security checks. Verifying that the endpoint path in the Spring Boot configuration exactly matched the one used in the Axios call was also essential. Additional logging in the Spring Security configuration helped pinpoint the misconfiguration, ultimately preventing the 403 response.