network · high priority
CORS 완전 이해
Same-Origin Policy부터 Preflight까지
intermediate 난이도2시간토스카카오네이버당근배민
시작 전
이해도
매우 낮음
학습 개요
탄생 배경
쉬운 설명
복잡한 개념을 실생활 비유로 설명합니다.
“클럽 경비원”
브라우저는 경비원입니다. 다른 출처 서버에 요청할 때 경비원이 먼저 "이 출처에서 온 요청 허용됩니까?"라고 서버에 물어봅니다. 허용 목록에 있으면 통과, 아니면 차단합니다. curl이나 서버끼리 통신에는 이 경비원이 없으므로 CORS 제한이 없습니다.
핵심 개념
Origin 비교 (기준: https://api.example.com)
| URL | 결과 | 이유 |
|---|---|---|
| https://api.example.com/data | 같은 출처 ✅ | 모두 동일 |
| http://api.example.com | 다른 출처 ❌ | 프로토콜 다름 (https vs http) |
| https://api.example.com:8080 | 다른 출처 ❌ | 포트 다름 |
| https://sub.example.com | 다른 출처 ❌ | 서브도메인도 다른 출처 |
실무 적용
어떤 상황에서 사용하는가
프론트엔드에서 다른 도메인 API(외부 결제 API, 다른 팀 서버)를 호출할 때 CORS 에러 발생
어떻게 적용하는가
개발 환경: Next.js/Vite의 proxy 설정으로 CORS 우회. 프로덕션: 백엔드에서 Access-Control-Allow-Origin에 프론트 도메인 추가. credentials 필요 시 와일드카드(*) 사용 불가 — 토스, 카카오 결제 SDK에서 가맹점 도메인 명시적 등록이 필요한 이유입니다.
흔한 실수와 안티패턴
- credentials: true와 Access-Control-Allow-Origin: * 동시 사용 불가
- Preflight 캐시(Access-Control-Max-Age) 없으면 매 요청마다 OPTIONS 발생
- 개발 환경 proxy는 프로덕션에서 동작 안 함 — 배포 전 서버 CORS 설정 확인 필수
면접 질문
중급토스카카오네이버당근
답변 방향 힌트
단계적 접근, 브라우저 도구 활용
반드시 언급할 키워드
- Network 탭 확인
- Preflight 여부
- 서버 응답 헤더 확인
예상 꼬리 질문
- Simple Request와 Preflight Request의 차이는?
- CORS와 CSRF의 관계는?