Same-Origin Policy

브라우저는 기본적으로 다른 출처의 요청을 막습니다. 이것이 Same-Origin Policy(동일 출처 정책)입니다.

출처는 프로토콜 + 도메인 + 포트 3가지가 모두 같아야 같은 출처로 인식합니다.

HTML
1https://example.com:443  (기준)
2
3https://example.com:443/page    → ✅ 같은 출처 (경로는 무관)
4http://example.com:443          → ❌ 프로토콜 다름
5https://api.example.com:443     → ❌ 서브도메인 다름
6https://example.com:3000        → ❌ 포트 다름

CORS

Same-Origin Policy는 너무 엄격해서 프론트(3000포트)와 백엔드(8080포트)가 분리된 현대 개발 환경에서는 항상 막힙니다. 그래서 "서버가 명시적으로 허용한 출처는 통과시켜줄께" 라고 예외 메커니즘을 두었는데 이것이 바로 CORS입니다.

단순 요청(Simple Request)

GET, POST 중 Content-Type이 application/x-www-form-urlencoded, text/plain, multipart/form-data인 경우는 바로 요청을 보냅니다. 서버 응답에 Access-Control-Allow-Origin 헤더가 있으면 브라우저가 통과시킵니다.

Preflight 요청

그 외 대부분의 경우, 특히 application/json이나 PUT/DELETE/PATCH 같은 메서드를 쓸 때는 실제 요청 전에 OPTIONS 메서드로 사전 확인 요청을 먼저 보냅니다.

HTML
1브라우저 → OPTIONS /api/data (이 요청 보내도 돼?)
2서버     → 200 OK + 허용 헤더
3브라우저 → 실제 요청 전송