network
CORS.
Cross-Origin Resource Sharing, preflight, credential, 프론트엔드 디버깅
CORS는 브라우저가 다른 origin API 응답을 JS가 읽게 할지 서버 헤더로 결정하는 보안 정책입니다.
🔒 Same-Origin Policy
- Origin = scheme + host + port
fetch('https://api.other.com')fromhttps://my.com→ 기본 차단 (응답 body 읽기)
🔀 Simple vs Preflight
| Simple (preflight 없음) | Preflight (OPTIONS) |
|---|---|
| GET, HEAD, POST | PUT, DELETE, custom header |
| Simple Content-Type | Authorization, Content-Type: application/json |
- Preflight: 브라우저가 OPTIONS 먼저 →
Access-Control-Allow-*확인 후 본 요청
📨 주요 헤더
Response (서버)
Access-Control-Allow-Origin:https://my.com또는*(credential 시*불가)Access-Control-Allow-Methods,Allow-HeadersAccess-Control-Allow-Credentials: true+ cookie
Request
Origin- Preflight:
Access-Control-Request-Method,Request-Headers
🐛 프론트 디버깅
- Network: OPTIONS 404/403 → 서버 CORS 미설정
credentials: 'include'↔Allow-Credentials+ 구체적 Origin- Proxy (dev): Vite/Next rewrites로 same-origin 우회
🔗 참고 자료
- MDN: CORS — CORS 헤더와 preflight 흐름을 설명한다.
- Fetch Standard: CORS protocol — CORS의 공식 프로토콜 정의다.
- Fetch Standard — fetch와 cross-origin 요청 처리의 표준이다.