스프링 부트 3에서 CORS 설정하기: 올바른 API 접근 관리 방법

 

CORS(Cross-Origin Resource Sharing)는 웹 애플리케이션이 다른 출처(Origin)의 리소스에 접근할 수 있도록 허용하는 보안 메커니즘입니다. 스프링 부트 3에서는 CORS 설정을 유연하게 관리할 수 있는 다양한 옵션을 제공합니다. 이 블로그에서는 스프링 부트 3에서 CORS를 설정하는 방법, 주요 개념, 그리고 실무 예제를 3가지로 나누어 설명하겠습니다.

---

1. CORS란 무엇인가?

CORS는 웹 브라우저가 보안을 강화하기 위해 도입한 정책으로, 특정 출처에서만 리소스 요청을 허용하거나 제한할 수 있습니다. 예를 들어, 한 도메인에서 실행 중인 클라이언트 앱이 다른 도메인(API 서버)의 리소스를 요청할 경우, API 서버가 요청을 명시적으로 허용해야 합니다.
CORS 요청은 다음과 같은 상황에서 발생합니다:

• API 요청이 다른 도메인으로 전송될 때 (http://localhost:3000에서 http://api.example.com으로 요청).
• 다른 포트 또는 프로토콜 간 요청 (http://localhost:8080에서 https://localhost:8443로 요청).

---

2. 스프링 부트 3에서의 CORS 설정 방법

스프링 부트 3에서는 전역(Global) 및 컨트롤러별(Local)로 CORS를 설정할 수 있습니다.

2.1 전역(Global) CORS 설정

전역 CORS 설정은 애플리케이션 전역에서 CORS 정책을 적용합니다. 이는 WebMvcConfigurer를 구현하여 설정할 수 있습니다.
예제 1: 전역 CORS 설정

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 모든 엔드포인트에 대해 적용
                .allowedOrigins("http://localhost:3000", "https://myfrontend.com") // 허용할 출처
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 허용할 HTTP 메서드
                .allowedHeaders("*") // 모든 헤더 허용
                .allowCredentials(true) // 쿠키 허용
                .maxAge(3600); // 옵션 요청의 캐싱 시간 (초)
    }
}

2.2 컨트롤러별(Local) CORS 설정

특정 컨트롤러 또는 엔드포인트에만 CORS를 설정하려면 @CrossOrigin 어노테이션을 사용합니다.
예제 2: 컨트롤러별 CORS 설정

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@CrossOrigin(origins = "http://localhost:3000", maxAge = 3600)
public class ApiController {
    @GetMapping("/api/data")
    public String getData() {
        return "CORS 설정된 데이터";
    }
}

---

3. Spring Security와 CORS 설정 통합

스프링 부트 3에서 Spring Security를 사용할 경우, CORS 정책은 HttpSecurity를 통해 추가 설정해야 합니다. 그렇지 않으면 보안 설정이 CORS 요청을 차단할 수 있습니다.
예제 3: Spring Security와 CORS 설정

import org.springframework.context.annotation.Bean;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.web.SecurityFilterChain;

@Configuration
public class SecurityConfig {

    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http.cors() // CORS 활성화
            .and()
            .authorizeRequests()
            .anyRequest().authenticated() // 모든 요청 인증
            .and()
            .formLogin();

        return http.build();
    }

    @Bean
    public CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.addAllowedOrigin("http://localhost:3000");
        configuration.addAllowedMethod("*");
        configuration.addAllowedHeader("*");
        configuration.setAllowCredentials(true);

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

---

4. 실무 예제

4.1 Vue.js와의 통합

Vue.js 프런트엔드에서 스프링 부트 3 백엔드에 요청할 경우, axios를 사용해 CORS 요청을 보낼 수 있습니다.
프런트엔드 예제 (axios 설정)

import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'http://localhost:8080/api',
  withCredentials: true // 쿠키 전송 허용
});

apiClient.get('/data')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

---

4.2 옵션 요청(Preflight) 처리

브라우저는 CORS 요청 전에 OPTIONS 메서드로 프리플라이트 요청을 보냅니다. 이는 서버에서 처리해야 합니다.
예제: OPTIONS 요청 허용

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

---

4.3 프로덕션 환경에서 동적 CORS 설정

프로덕션 환경에서는 특정 IP 또는 도메인만 허용하는 동적 설정이 필요할 수 있습니다.
예제: 환경별 동적 설정

@Value("${cors.allowed-origins}")
private String[] allowedOrigins;

@Override
public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**")
            .allowedOrigins(allowedOrigins)
            .allowedMethods("*")
            .allowedHeaders("*");
}

application.properties

cors.allowed-origins=http://frontend1.com,http://frontend2.com

---

5. 결론

CORS 설정은 API 보안을 강화하고 클라이언트와의 원활한 통신을 보장하는 중요한 요소입니다. 스프링 부트 3에서는 전역 설정, 컨트롤러별 설정, 그리고 Spring Security와의 통합으로 다양한 요구를 충족할 수 있습니다. 위에서 제시한 예제를 기반으로, 여러분의 프로젝트에 적합한 CORS 설정을 적용해 보세요. CORS를 잘 관리하면 안전하고 확장 가능한 API 서비스를 구축할 수 있습니다.