🌐 CORS (Cross-Origin Resource Sharing)
브라우저의 보안 정책과 CORS 동작 원리를 시각적으로 학습해보세요
🌐 CORS란 무엇인가?
CORS(Cross-Origin Resource Sharing)는 웹 브라우저에서 실행되는 스크립트가 다른 출처(origin)의 리소스에 접근할 수 있도록 하는 메커니즘입니다.
📍 Origin(출처)이란?
프로토콜 + 도메인 + 포트번호의 조합
https://example.com
프로토콜: https
도메인: example.com
포트: 443 (기본값)
http://example.com:3000
프로토콜: http
도메인: example.com
포트: 3000
https://api.example.com
프로토콜: https
도메인: api.example.com
포트: 443 (기본값)
🔒 Same-Origin Policy
브라우저의 기본 보안 정책으로, 한 출처에서 로드된 문서나 스크립트가 다른 출처의 리소스와 상호작용하는 것을 제한합니다.
✅ 같은 출처 (허용)
https://example.com/page1→https://example.com/api/data
같은 프로토콜, 도메인, 포트
❌ 다른 출처 (차단)
https://example.com→https://api.other.com
다른 도메인
⚙️ CORS 동작 방식
1. 단순 요청 (Simple Request)
GET, HEAD, POST 메서드 중 하나이고, 특정 헤더만 사용하는 경우
// 브라우저 → 서버
GET /api/data HTTP/1.1
Origin: https://example.com
// 서버 → 브라우저
Access-Control-Allow-Origin: https://example.com
2. 프리플라이트 요청 (Preflight Request)
실제 요청이 서버 데이터에 영향을 줄 수 있을 때(예: `PUT`, `DELETE` 메서드 사용) 브라우저는 보안을 위해 먼저 '사전 확인(preflight)' 요청을 보냅니다. 이 요청은 `OPTIONS` 메서드를 사용하며, 서버에게 실제 요청을 보내도 안전한지 묻는 역할을 합니다. 서버가 preflight 요청에 허용하는 헤더로 응답해야만, 브라우저는 비로소 실제 요청(예: `PUT` 요청)을 보냅니다.
// 1. OPTIONS 요청 (Preflight)
OPTIONS /api/data HTTP/1.1
Origin: https://example.com
Access-Control-Request-Method: PUT
// 2. OPTIONS 응답
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: PUT, DELETE
// 3. 실제 요청
PUT /api/data HTTP/1.1
🧑💻
1nnovator 김민성
JavaScript 학습 센터 개발자
🌟 이 프로젝트가 도움이 되셨다면 블로그에서 더 많은 개발 이야기를 확인해보세요!
🤖이 페이지는 생성형 AI의 도움을 받아 제작되었습니다.