[CORS] CORS 개념과 스프링 부트에서 처리하는 방법(OPTIONS 요청)

 

1. CORS 란?

• Cross-Origin Resource Sharing 의 약자로, 웹 브라우저에서 다른 출처(도메인, 프로토콜, 포트)의 리소스에 접근할 수 있도록 허용하는 메커니즘
• FE(브라우저) → BE(API 서버) 요청을 할 때, 도메인/포트/프로토콜이 다르면 "Cross-Origin" 요청이 됩니다.
• 보안 때문에 브라우저는 기본적으로 이를 차단해요.
• 서버가 **“나는 이 출처(origin)에서 오는 요청을 허용한다”**라고 응답해줘야 브라우저가 통과시킵니다.

=> 한마디로 말해서, BE API를 아무나 호출할 수 없도록 브라우저 보안 표준상 CORS 에러를 발생시켜 차단.

=> 개발계에서는 편하려고 * 열어두고(모든 도메인에서 오는 요청을 다 허용), 운영계에서는 필요한 출처만 허용해둠.

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization

 

 

=> 단, **쿠키/인증정보(credential)**를 포함하는 요청은 * 와 함께 허용할 수 없음.

Access-Control-Allow-Origin: https://my-frontend.com
Access-Control-Allow-Credentials: true

Access-Control-Allow-Credentials: true 를 쓰려면,
👉 Access-Control-Allow-Origin 은 반드시 정확한 출처(origin) 로 지정해야 함. (표준에서 아예 금지시켜둠)

 

 

 

2. OPTIONS 요청(Preflight Request)

• 브라우저는 단순 GET/POST 말고, 인증 헤더, JSON, PUT/DELETE 같은 걸 보내려 하면 먼저 OPTIONS 메서드로 미리 서버에 물어봅니다. (=Preflight Request =사전 요청)

 

 

3. 스프링 부트에서 OPTIONS 요청 설정하는 방법 (@CrossOrigin , WebMvcConfigurer 등)

- @CrossOrigin 사용하는 방법 (간단, 특정 컨트롤러/메서드에만 적용)

@RestController
@RequestMapping("/api")
public class UserController {

    // 특정 메서드에만 CORS 허용
    @CrossOrigin(origins = "https://my-frontend.com")
    @GetMapping("/users")
    public List<String> getUsers() {
        return List.of("Alice", "Bob", "Charlie");
    }
}

👉 여기서 @CrossOrigin 을 붙이면, 이 API는 https://my-frontend.com 에서 오는 요청만 허용하게 돼요.
브라우저가 이 주소에서 API를 호출하면, 스프링이 자동으로 아래 응답 헤더를 추가해줍니다:

Access-Control-Allow-Origin: https://my-frontend.com

 

 

---

- WebMvcConfigurer 사용하는 방법 (전역 설정)

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")  // 어떤 URL 패턴에 적용할지
                .allowedOrigins("https://my-frontend.com") // 허용할 Origin
                .allowedMethods("GET", "POST", "PUT", "DELETE") // 허용할 HTTP 메서드
                .allowedHeaders("*") // 허용할 요청 헤더
                .allowCredentials(true); // 쿠키/인증정보 허용 여부
    }
}

👉 이 설정을 쓰면, /api/** 아래 모든 엔드포인트에 대해 CORS 규칙이 적용돼요.

즉, 특정 API마다 따로 @CrossOrigin 붙이지 않아도 됩니다.

 

 

 

 

 

---

4. 언제 어떤 걸 써야 할까?

• 테스트/간단 프로젝트 → @CrossOrigin (빠르게 적용 가능)
• 실제 운영/규모 큰 프로젝트 → WebMvcConfigurer (중앙에서 한 번에 관리 가능)

---

✅ 정리
Spring Boot 자체가 CORS를 막는 게 아니라, 브라우저가 막지 않게 필요한 CORS 응답 헤더를 자동으로 붙여주는 도구를 제공하는 거예요.
그래서 @CrossOrigin 이나 WebMvcConfigurer 를 사용하면, 서버가 브라우저한테 “얘는 들어와도 돼!” 하고 들여보내줌.