CORS(Cross-Origin Resource Sharing)

Yunsung·2025년 6월 6일
post-thumbnail

✅ CORS(Cross-Origin Resource Sharing) 완전 정리

1. 📌 CORS란?

CORS (Cross-Origin Resource Sharing)
브라우저 보안 정책 중 하나로,
JavaScript가 다른 도메인(origin)에 있는 서버로 요청을 보낼 수 있도록 제어하는 메커니즘입니다.

🔒 왜 필요한가?

기본적으로 브라우저는 출처가 다른 도메인 간 요청을 차단합니다.
이것은 보안상의 이유로, 악성 스크립트가 사용자의 인증정보를 탈취하는 것을 방지하기 위함입니다.

🔁 예시:

프론트엔드: http://localhost:3000  
백엔드: http://localhost:8080  
→ 브라우저는 이를 "다른 출처"로 인식하고 기본적으로 요청을 차단

따라서, 백엔드에서 “이 도메인의 요청은 허용해도 된다”는 설정을 해줘야 합니다.
이것이 바로 CORS 설정입니다.


2. ⚙️ Spring Boot에서의 CORS 설정

Spring Boot에서는 두 가지 방식으로 CORS를 설정할 수 있습니다:


✅ (1) 전역 CORS 설정 – WebMvcConfigurer 사용

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 모든 경로 허용
                .allowedOrigins("https://your-frontend.com") // 허용 도메인
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowCredentials(true); // 쿠키/세션 포함 허용
    }
}

✅ (2) 컨트롤러별 CORS 설정 – @CrossOrigin 어노테이션 사용

@CrossOrigin(origins = "https://your-frontend.com", allowCredentials = "true")
@GetMapping("/api/data")
public ResponseEntity<?> getData() {
    ...
}

3. ⚠️ CORS 설정 시 주의할 점

설정 항목설명주의 사항
allowedOrigins("*")모든 출처 허용allowCredentials(true)함께 사용 불가
allowCredentials(true)인증정보(쿠키, 세션 등) 포함 허용allowedOrigins("*")함께 설정 시 예외 발생
allowedOriginPatterns()Spring Boot 2.4 이상부터 도입와일드카드 사용 가능 (https://*.example.com)

4. 🛠 Spring Boot 2.4 이후 변화점

Spring Boot 2.4 이상에서는 보안 정책 강화로 인해 다음과 같은 제한이 생깁니다:

❌ allowedOrigins("*") + allowCredentials(true)

이 조합은 보안상 명시적인 도메인 지정이 필요합니다.
해결 방법:

.allowedOriginPatterns("https://*.mydomain.com")
.allowCredentials(true)

allowedOriginPatterns()를 사용하면 와일드카드도 적용 가능해 유연한 설정이 가능합니다.


5. 🌐 실제 요청 흐름 (CORS 처리 순서)

1. 프론트엔드에서 fetch/AJAX 요청
2. 브라우저가 "이건 cross-origin 요청이네?" 판단
3. 먼저 OPTIONS preflight 요청(사전 확인 요청) 전송
4. 서버(CORS 설정됨)가 허용 헤더 반환
5. 브라우저가 허용 확인 → 실제 요청(GET/POST 등) 전송

✅ CORS 관련 추가로 알아두면 좋은 실전 지식

🔒 왜 allowedOrigins("*") 와 allowCredentials(true)는 함께 쓰면 안 되는가?

  • allowCredentials(true)는 쿠키, 세션, 인증 토큰 등 민감한 정보를 포함한 요청을 허용합니다.

  • 그런데 allowedOrigins("*")는 모든 출처를 허용하는 설정입니다.

  • 이 둘을 함께 사용하면, 어떤 출처든지 민감한 정보에 접근 가능해져 보안상 매우 위험합니다.

🔥 이 조합은 W3C 명세에서 금지되어 있으며, Spring Boot 2.4 이상에서는 예외가 발생하거나 자동 무시됩니다.

📌 반드시 도메인을 명시적으로 지정하거나,
Spring 2.4+부터는 allowedOriginPatterns()로 와일드카드를 제한적으로 허용해야 합니다.


📡 Preflight 요청(OPTIONS)이란?

  • 브라우저가 실제 요청 전에 미리 보내는 사전 확인 요청입니다.

  • 주로 아래와 같은 경우 발생합니다:

    • POST, PUT, DELETE 등 안전하지 않은 메서드 사용 시

    • Authorization, Content-Type 등 커스텀 헤더 포함 시

  • 이때 브라우저는 OPTIONS 메서드로 요청을 보내고, 서버가 Access-Control-Allow-* 헤더로 명시적 허용을 해줘야 실제 요청을 보냅니다.


⚙️ 브라우저가 막는 건데, 왜 백엔드에서 설정해야 할까?

  • CORS는 브라우저의 보안 정책입니다.
    하지만 허용 여부는 백엔드가 응답 헤더로 판단 기준을 제시해야 합니다.

  • 백엔드가 올바르게 응답하면 브라우저는 요청을 허용하고,
    허용하지 않으면 브라우저가 요청을 차단합니다.

✅ 그래서 백엔드에서 반드시 아래와 같은 CORS 응답 헤더를 설정해야 합니다:

  • Access-Control-Allow-Origin

  • Access-Control-Allow-Credentials

  • Access-Control-Allow-Methods

  • Access-Control-Allow-Headers

profile
풀스택 개발자로서의 도전을 하는 중입니다. 많은 응원 부탁드립니다!!😁

0개의 댓글