Spring React간 CORS 이슈 트러블슈팅

백엔드 Spring, 프론트엔드 React로 풀스택 개발 중, CORS에러를 마주하여 이에 대한 트러블슈팅 기록을 남겨둔다.

기존에는 React를 빌드한 결과물을 Spring의 src/main/resources/static 경로에 넣고 Spring서버를 실행하면 별 다른 이슈가 발생하지 않았는데, 이번에 React와 Spring을 서로 다른 포트에서 개방할 경우, CORS에러가 발생한다.

CORS란?

Cross-Origin-Resource-Sharing의 약자로 서로 다른 출처에서 리소스를 공유하는 것을 뜻한다.

React클라이언트의 경우, GET방식으로 API를 요청할때 다음과 같은 URL을 사용한다.(포트 3000)

https://sample.sp:3000/user?query=name&page=1#first

a1.png 이 URL에서 Origin을 나타내는 부분은 Protocol, Host, Port 부분이다.
즉, https://sample.sp:3000과 https://sample.sp:8080은 서로 다른 Origin으로 구분된다.

만약 localhost로 테스트한다고 하면, http://localhost:3000, http://localhost:8080은 서로 다른 origin이다.

스프링부트 서버에 http://localhost:3000 오리진의 요청에 대하여 CORS를 허용해주면 이 이슈가 해결된다.

CORS를 허용하는 세가지 방법

  • CorsFilter 로 직접 response에 header 를 넣어주기
  • Controller 에서 @CrossOrigin 어노테이션 추가하기
  • WebMvcConfigurer 를 이용해서 처리하기

이번 포스트에서는 3번째 방법인 WebMvcConfigurer를 이용하여 처리하는 방법을 다룬다.

WebMvcConfigurer이용 CORS 해결

@Configuration
@EnableWebMvc
public class WebMvcConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000")
                .allowedMethods("OPTIONS","GET","POST","PUT","DELETE");
    }
}

위 코드를 프로젝트 내에 삽입하면 스프링 컨테이너가 해당 Configuration을 빈으로 등록하고 CORS에러가 해결된다!