[Spring] CORS 설정 방법 | REST API와 프론트엔드 연결하기

프론트엔드에서 REST API를 호출하다 보면 CORS(Cross-Origin Resource Sharing) 문제를 만날 수 있다.

특히 프론트엔드와 백엔드 서버가 서로 다른 주소에서 실행되는 개발 환경에서 자주 발생한다.

1. CORS란?

브라우저는 보안상의 이유로 다른 출처(Origin)의 서버에 요청하는 것을 기본적으로 제한한다.

예를 들어 프론트엔드가 다음 주소에서 실행되고 있다고 가정한다.

http://localhost:3000

 

백엔드 서버가 다음 주소에서 실행된다면

http://localhost:8080

 

두 주소의 Origin이 다르기 때문에 브라우저에서 백엔드 API를 호출할 때 CORS 문제가 발생할 수 있다.

이때 서버는 어떤 출처의 요청을 허용할 것인지 브라우저에게 알려줘야 한다.

2. Spring Boot에서 CORS 설정하기

Spring에서는 WebMvcConfigurer를 이용해 CORS를 설정할 수 있다.

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {

        registry.addMapping("/api/**")
                .allowedOrigins(
                        "https://cdpn.io",
                        "http://localhost:3000"
                )
                .allowedMethods(
                        "GET",
                        "POST",
                        "PUT",
                        "DELETE",
                        "PATCH",
                        "OPTIONS"
                )
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}

각 설정은 다음과 같은 의미이다.

설정	의미
addMapping("/api/**")	CORS를 적용할 API 경로를 지정한다.
allowedOrigins()	API 요청을 허용할 출처를 지정한다.
allowedMethods()	허용할 HTTP Method를 지정한다.
allowedHeaders("*")	모든 요청 헤더를 허용한다.
allowCredentials(true)	쿠키나 인증 정보를 포함한 요청을 허용한다.

핵심

.allowedOrigins(
    "https://cdpn.io",
    "http://localhost:3000"
)

여기에는 실제로 API를 요청하는 프론트엔드의 Origin을 지정해야 한다.

따라서 개발 환경에서는 localhost:3000을 추가하고, 실제 배포 환경에서는 배포된 프론트엔드의 주소를 추가하는 방식으로 관리할 수 있다.