100% 브라우저 메모리 연산 • 서버 로그 수집 제로 • 즉각적인 실행
Curious Techie개발자 툴박스
Web SecurityW3C Recommendation / Fetch StandardVerified Terminology

교차 출처 리소스 공유 (CORS)

핵심 요약 답변

서버가 HTTP 헤더를 통해 특정 외부 출처가 브라우저 내에서 자신의 리소스를 읽을 수 있도록 허용하는 W3C 표준 규격.

Entity Relationships (GEO Conceptual Hierarchy)

Taxonomy Model
Relational Knowledge Graph Sequence
CORS→
SOP 완화→
Access-Control-Allow-Origin→
사전 비행 OPTIONS→
인증 자격 증명
CORS
•>SOP 완화
•>Access-Control-Allow-Origin
•>사전 비행 OPTIONS
•>인증 자격 증명

Technical Explanation & Operational Mechanics

CORS는 브라우저의 동일 출처 정책(SOP)을 제어된 방식으로 완화합니다. Access-Control-Allow-Origin 헤더를 통해 다른 도메인의 클라이언트 스크립트가 API 데이터를 읽도록 인가합니다. 단순 요청 범위를 벗어나는 호출은 사전 비행(preflight OPTIONS) 요청으로 검증됩니다.

Technical Example & Practical Implementation

CORS 사전 비행(Preflight) 헤더 교환

커스텀 헤더나 위험 메서드 실행 전 서버 권한을 선행 확인하는 절차

// 1. Browser sends automatic preflight check:
OPTIONS /api/v1/profile HTTP/1.1
Host: api.example.com
Origin: https://app.client.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Authorization, Content-Type

// 2. Server grants cross-origin permission:
HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://app.client.com
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Authorization, Content-Type
Access-Control-Max-Age: 86400

// 3. Browser executes the actual POST request:
POST /api/v1/profile HTTP/1.1
Host: api.example.com
Origin: https://app.client.com
Content-Type: application/json