CORS
2025-04-25 TIL-CORS
CORS
CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유)는 브라우저의 동일 출처 정책(Same-Origin Policy, SOP)의 제한을 완화하기 위해 만들어진 보안 메커니즘이다.
동일 출처 정책(Same-Origin Policy)이란?
브라우저 보안 정책 중 하나로, 출처(origin)가 다른 리소스 간의 데이터 접근을 제한한다.
- 출처는
프로토콜://호스트:포트로 정의된다. 예:http://example.com:80과https://example.com:443은 서로 다른 출처이다.
이 정책은 다음과 같은 상황에서 데이터 접근을 차단한다:
- 다른 도메인의 API에 요청 후 응답에 접근
- iframe 또는 script에서 다른 출처의 쿠키나 로컬스토리지 접근
제약이 필요한 이유
CSRF, XSS 같은 보안 위협을 줄이기 위해서
예: 사용자가 로그인된 상태에서 악성 사이트에 접속하면, 그 사이트가 백그라운드에서 사용자의 세션 쿠키를 이용해 은행 서버에 돈을 보내는 요청을 보낼 수 있다. SOP는 이러한 동작을 브라우저 수준에서 차단한다.
CORS가 필요한 이유
현대 웹 개발에서는 프론트엔드와 백엔드가 다른 출처에서 동작하는 경우가 많다.
예:
- 프론트엔드:
http://localhost:3000(React 개발 서버) - 백엔드 API:
http://api.example.com
이러한 구조에서는 기본적으로 브라우저가 API 응답을 차단한다.
이 때 CORS를 사용해 서버가 안전하게 요청을 허용하도록 설정한다.
CORS 동작 원리 및 설정 방법
1. Preflight Request (사전 요청)
OPTIONS메서드로 브라우저가 서버에 먼저 물어본다:“이 출처에서 이 메서드와 헤더로 요청해도 괜찮아?”
서버는 다음과 같은 응답을 줘야 한다:
Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type, Authorization
2. Simple Request
GET,POST,HEAD메서드만 사용하고, 커스텀 헤더가 없으면 브라우저는 preflight 없이 바로 요청한다.
CORS는 보안을 강화할까?
CORS는 보안 강화 수단이 아니라, 브라우저의 보안 정책을 완화하는 도구다.
CORS는 서버가 “어떤 출처에서 접근을 허용할지”를 명시하는 수단일 뿐이며, 잘못 설정하면 오히려 보안에 취약해질 수 있다.
Access-Control-Allow-Origin: *을 사용하는 경우, 모든 출처에서 접근 가능해지므로 주의가 필요하다.- 민감한 정보(API 키, 사용자 정보 등)를 주고받는 경우에는 자격 증명(credentials)을 함께 고려해야 한다:
Access-Control-Allow-Credentials: true
프론트엔드 개발자가 주의할 점
- 개발 환경에서는 프록시 설정을 활용해 CORS 문제를 우회할 수 있다 (예:
vite.config.js,webpack-dev-server). - 실제 배포 시에는 백엔드에서 CORS 설정이 필요하며, 프론트엔드에서는 설정할 수 없다.
- 브라우저가 막는 것이므로 Postman, curl에서는 CORS가 적용되지 않는다.