[Spring] CORS 에러 해결 시 WebMvcConfigurer 방식이 동작하지 않는다면

배경

Udemy에서 스프링 부트를 학습하며 리액트와 스프링부트를 활용한 토이프로젝트를 진행 중이다. 리액트는 3000번 포트를, 스프링부트는 8080포트를 사용 중이기에 리액트에서 부트로 통신 시도 시 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS) 에러가 발생한다. 보통은 아래와 같은 코드를 메인함수가 있는 Application에 삽입하거나, WebMvcConfigurer를 extend한 별도의 클래스를 생성하고 bean으로 등록하여 이 문제를 해결할 수 있다고 한다. 그러나 나의 경우에는 이런 시도에도 불구하고 문제가 해결되지 않았다.

@Bean
public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurer(){
        public void addCorsMappings(CorsRegistry registry){
            registry.addMapping("/**")
                    .allowedMethods("*")
                    .allowedOrigins("http://localhost:3000");
        }
    };
}

문제의 원인

스프링 시큐리티(Spring Security)가 원인이였다. 기존에 제작해놓은 프로젝트에 스프링 시큐리티의 필터를 적용해놓은 상태였는데, 이 필터에 브라우저에서 보내는 preflight request가 걸려 어플리케이션에 들어오기 전에 차단되며 403 에러를 출력한 것이다. 다시 말하면 들어오는 모든 요청에 대해 스프링 시큐리티에서 먼저 차단을 하기 때문에 오버라이드한 addCorsMappings 함수 자체에 도달할 일이 없었다는 뜻이다.

해결 방법

물론 addCorsMappings를 이용하는 방식 이외에도 프론트쪽에서 프록시를 쓰거나 스프링 시큐리티 필터에 CORS필터를 넣는 활용한 방법도 많이 나와있었다. 그러나 시큐리티에 CORS 필터를 삽입하는 방식은 나의 경우엔 문제를 해결해주지 못했고, 온라인 강의를 따라가는 과정에서 가급적이면 처음 방식으로 문제를 해결해야했기에 프록시를 이용하는 방식은 선택하지 않았다.

 

1. 스프링 시큐리티 config에 cors 관련 설정을 필터로 추가한다 -> 해결 안 됨

2. 프론트에서 프록시 사용 -> 백엔드에서의 해결이 필요했음

3. 스프링 시큐리티를 해제한다 -> 임시방편으로 해결

4. SecurityFilterChain에서의 preflight request 허용 -> 근본적인 해결 방법 (Note 2 참조)

Note

1. 결국엔 개발 과정에서 당장 사용할 일이 없는 스프링 시큐리티를 해제하여 임시로 문제를 해결했다. 그러나 필터를 삭제하고, 의존성에서 스프링 시큐리티를 지운 후 업데이트를 했음에도 여전히 CORS문제가 해결되지 않았다. 결국에는 듣고있는 강의에서 제공해주는 프로젝트 코드(내가 직접 작성한 프로젝트와 같은 내용)를 가져와 사용하게 되었는데, 비슷한 문제를 인지한건지 강사도 기존 프로젝트에서 스프링 시큐리티를 적용하지 않은 채로 코드를 제공하고 있었다. 미리 말해줬더라면 그냥 제공하는 코드를 사용해서 시간을 아꼈을텐데. 나중에 시간나면 시큐리티 적용하면서 찬찬히 봐야겠다.

 

2. (추가된 내용) 스프링 시큐리티의 필터체인을 적용하면 아무 설정을 하지 않더라도 기본적으로 들어오는 모든 요청을 걸러내기 때문에 SecurityFilterChain에서 OPTIONS 메서드를 허용해주는 작업이 필요하다. 이 작업을 수행하여 정상적으로 동작하는 걸 확인한 코드는 다른 포스트 하단에 작성했는데, antMatchers -> requestMatchers 전환은 스프링과 스프링 시큐리티의 버전에 따라 필수 내용은 아니나, 하단에 있는 필터체인 내부의 경로별 메서드 허용부분을 참고하여 적용하면 문제를 해결할 수 있다.