2026-01-14
CORS (Cross-Origin Resource Sharing)
CORS란?
- 다른 출처(origin)의 리소스를 요청할 수 있도록 허용하는 브라우저 보안 정책
- 기본적으로 브라우저는 다른 출처로의 요청을 차단한다.
Origin(출처)이란?
다음 3가지가 모두 같아야 같은 출처
- 프로토콜 (http / https)
- 도메인
- 포트
https://example.com:3000
https://example.com:4000 → 포트 다름 (다른 출처)
왜 CORS가 필요할까?
서버 보안 정책 X, 브라우저 보안 정책 O
- 악성 사이트가 사용자 권한으로 API 요청하는 걸 방지
- 브라우저 단에서 보안을 강화하기 위함
CORS 에러는 언제 발생하나?
- 프론트엔드에서 다른 출처의 API 요청
- 서버가 CORS 허용 헤더를 보내지 않았을 때
⇒ 서버 응답은 왔지만 브라우저가 응답을 막음
CORS 동작 방식
1. Simple Request
- 조건을 만족하면 바로 요청
조건 예시:
- GET / POST / HEAD
- Content-Type:
application/x-www-form-urlencoded,multipart/form-data,text/plain
⇒ 서버가 허용 헤더만 보내면 OK
2. Preflight Request
- 실제 요청 전에 OPTIONS 요청을 먼저 보냄
- 서버에 “이 요청 보내도 되나요?” 확인
OPTIONS /api
서버 응답에 다음 헤더 필요:
Access-Control-Allow-Origin
Access-Control-Allow-Methods
Access-Control-Allow-Headers
주요 CORS 헤더 정리
| 헤더 | 설명 |
|---|---|
| Access-Control-Allow-Origin | 허용할 출처 |
| Access-Control-Allow-Methods | 허용 HTTP 메서드 |
| Access-Control-Allow-Headers | 허용 헤더 |
| Access-Control-Allow-Credentials | 쿠키 포함 여부 |
프론트엔드에서 할 수 있는 대응
- 개발 환경에서 proxy 설정
- 백엔드에 CORS 설정 요청
- 같은 출처로 API 요청하도록 구조 변경