스프링] 스프링 시큐리티 CORS 문제 해결하기

문제

강의를 보고 만들어 놓은 클론 프로젝트를 리팩토링하면서 발생한 문제를 기록한다.

먼저 하나의 프로젝트에 프론트와 백이 분리가 되어 있다.

 

어차피 둘 다 로컬 테스트였고 같은 프로젝트 내에서는 정상적으로 API 통신이 잘 되는 상태였다.

문제는 vue3로 된 보일러플레이트를 받아서 테스트를 하려고 했는데 이상하게 안된다??

 

같은 포트로 변경을 해도 이상하게 보일러플레이트에서 테스트할 때는 안되는 거였다?

 

프로젝트 내에 있는 프론트와 백은 정상적으로 통신이 되지만

외부에서의 다른 프로젝트에서는 안되는 상황이 와서 원인을 찾는데 더 헷갈렸던 것 같았다.

 

결과적으로 외부 프론트는 https://reqres.in/ 에서 테스를 진행함으로 문제 없음을 확인했다.

 

 

원인

즉, 스프링시큐리티에서 CORS 문제에 대한 설정을 하지 않아서 생기는 문제였다.

 

 

해결

 @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http.cors();
        return http
                .authorizeHttpRequests()
                .requestMatchers("/auth/login").permitAll()
                .anyRequest().permitAll()
                .and()
                .addFilterBefore(emailPasswordAuthFilter(), UsernamePasswordAuthenticationFilter.class)
                .exceptionHandling(e -> {
                    e.accessDeniedHandler(new Http403Handler(objectMapper));
                    e.authenticationEntryPoint(new Http401Handler(objectMapper));
                })
                .rememberMe(rm -> rm.rememberMeParameter("remember")
                        .alwaysRemember(false)
                        .tokenValiditySeconds(2592000)
                )
                .csrf(AbstractHttpConfigurer::disable)
                .build();
    }

 

    @Bean
    public CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration config = new CorsConfiguration();

        config.setAllowCredentials(true);
        config.setAllowedOrigins(List.of("http://localhost:3000"));
        config.setAllowedMethods(List.of("GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS"));
        config.setAllowedHeaders(List.of("*"));
        config.setExposedHeaders(List.of("*"));

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return source;
    }

 

일단 빠른 해결을 하기 위해서 구글 검색하면 나오는 코드로 등록을 했으나 현재는 필요한 부분에 대해서 수정을 하고 있다.

 

 

공부해야할것

1) CORS 요청의 종류,

ㄴ 현재 프론트에서 로그인 요청 시 2번의 요청이 가는데 이는 Preflight Request로써 예비요청과 본 요청으로 나눠 전송한다.

스크린샷을 첨부하지는 않았지만 위 스크린샷 400에러를 클릭해 상세하게 보면 OPTIONS라고 떠있는 것을 확인할 수 있다.

 

2) 스프링시큐리티

 

 

 

참고:

https://velog.io/@chullll/Spring-Security-CORS

[Spring Security] CORS

https://docs.spring.io/spring-framework/docs/current/javadoc-api/org/springframework/web/cors/CorsConfiguration.html

CorsConfiguration (Spring Framework 6.0.13 API)

Spring Security - permitAll() Filter 호출 에러 (velog.io)

Spring Security - permitAll() Filter 호출 에러

https://yousrain.tistory.com/22

Spring Security에서 CORS 해결