CORS( Cross‑Origin Resource Sharing ) 간단 정리

CORS (Cross‑Origin Resource Sharing) – 서비스·플랫폼 무관 요약

1. 개념 & 배경

• 동일‑출처 정책(SOP) 때문에 브라우저 스크립트는 다른 Origin 리소스 접근 제한
• CORS는 서버가 HTTP 헤더로 “허용할 교차‑출처 범위”를 선언해 합법적 호출을 가능케 하는 표준
• 현재 Fetch Standard에 통합되어 모든 주요 브라우저가 지원

2. 요청 흐름

단계	설명
① Simple Request	GET / HEAD / POST + safelisted 헤더만 사용 → 바로 전송
② Preflight	Non‑simple(DELETE·PUT 등)·커스텀 헤더 시 OPTIONS로 허가 질의
③ Actual Request	Preflight가 200 OK면 실제 메서드로 호출, 아니면 브라우저 차단

Simple Request 조건

• 메서드: GET │ HEAD │ POST
• Content‑Type은 application/x‑www‑form‑urlencoded, multipart/form‑data, text/plain 중 하나
• 헤더: Accept, Accept‑Language, Content‑Language, Content‑Type, Range (브라우저 > 2024 기준)

3. 주요 헤더

구분	헤더	역할
요청	Origin	요청 출발지(Scheme, Host, Port) 식별
	Access-Control-Request-Method	Preflight용, 사용할 실제 메서드 알림
	Access-Control-Request-Headers	Preflight용, 커스텀 헤더 목록 알림
응답	Access-Control-Allow-Origin	허용 Origin 값 또는 *
	Access-Control-Allow-Methods	허용 HTTP 메서드 목록
	Access-Control-Allow-Headers	허용 요청 헤더 목록
	Access-Control-Allow-Credentials	true 시 쿠키·Authorization 전송 허용
	Access-Control-Max-Age	Preflight 결과 캐시 시간(초)
	Access-Control-Expose-Headers	JS에서 읽을 수 있는 응답 헤더 지정
캐싱	Vary: Origin	프록시/브라우저 캐시를 Origin 값별로 분리 (권장)

주의: Allow-Credentials: true가 설정되면 Allow-Origin은 *를 사용할 수 없음.

4. 실무 이점 & 리스크

항목	요약
장점	- SPA에서 API / CDN 리소스 호출 자유도 향상 - 서버 간(클라이언트 제외) 통신 시에는 미적용으로 간편
리스크	- * 와일드카드 남용 시 누구나 인증된 호출 가능 → CSRF·토큰 탈취 위험
베스트프랙티스	- 필요한 Origin만 화이트리스트 - Max‑Age로 OPTIONS 트래픽 최소화 - Vary: Origin 설정해 캐시 충돌 방지