브라우저가 당신의 웹 애플리케이션을 보호하는 보안 기능입니다.
프론트엔드 개발을 하다 보면 누구나 한 번쯤 마주치는 오류가 있습니다.
“Access to fetch has been blocked by CORS policy.”
처음에는 서버 오류처럼 보이지만, 사실 CORS 오류는 브라우저가 의도적으로 차단한 보안 기능입니다.
즉, 프로그램이 잘못된 것이 아니라 브라우저가 사용자와 데이터를 보호하기 위해 동작하는 것입니다.
CORS(Cross-Origin Resource Sharing)란?
CORS는 출처(Origin)가 다른 웹사이트 간의 데이터 요청을 안전하게 제어하는 브라우저 보안 정책입니다.
여기서 출처(Origin) 는 다음 3가지 요소의 조합으로 결정됩니다.
* 프로토콜(Protocol) : http, https
* 도메인(Domain) : example.com
* 포트(Port) : 80, 443, 3000
이 중 하나라도 다르면 다른 출처(Cross-Origin) 로 간주됩니다.
예를 들어,
도메인이 다르므로 서로 다른 Origin입니다.
왜 CORS가 필요한가요?
만약 CORS가 없다면,
악성 웹사이트가 사용자의 로그인 정보를 이용해
은행, 쇼핑몰, 회사 시스템 등에 몰래 요청을 보낼 수도 있습니다.
CORS는 이러한 공격을 막기 위해
“서버가 허용한 출처에서만 데이터를 가져올 수 있도록” 제한합니다.
즉,
브라우저가 먼저 안전성을 확인한 후 요청을 허용하는 것입니다.
CORS 동작 과정
브라우저가 API를 호출하면 다음 순서로 동작합니다.
① 프론트엔드가 API 요청
② 브라우저가 Origin 확인
③ 서버가 CORS 헤더 응답
④ 브라우저가 허용 여부 판단
허용 → 데이터 전달
거부 → CORS 오류 발생
즉,
브라우저가 최종 허용 여부를 결정합니다.
단순 요청(Simple Request)
다음 조건이면
브라우저는 바로 요청을 보냅니다.
GET
POST
HEAD
일반적인 Content-Type
추가 확인 과정 없이 바로 처리됩니다.
프리플라이트 요청(Preflight Request)
다음과 같은 경우에는
브라우저가 실제 요청 전에
OPTIONS 요청을 먼저 보냅니다.
예를 들어
* PUT
* DELETE
* PATCH
* Authorization 헤더
* Custom Header
* JSON 외 특수 Content-Type
이 과정을 Preflight Request라고 합니다.
가장 중요한 CORS 응답 헤더
서버는 다음과 같은 헤더를 반환하여 브라우저에 허용 여부를 알려줍니다.
Access-Control-Allow-Origin
어떤 Origin을 허용할 것인가?
Access-Control-Allow-Origin:
Access-Control-Allow-Methods
허용할 HTTP 메서드
GET
POST
PUT
DELETE
Access-Control-Allow-Headers
허용할 요청 헤더
Authorization
Content-Type
X-API-Key
Access-Control-Allow-Credentials
쿠키 및 인증 정보 허용 여부
true
단, credentials: true를 사용하는 경우에는 Access-Control-Allow-Origin: *(전체 허용)를 함께 사용할 수 없습니다.
개발자가 가장 많이 하는 실수
서버에서 CORS를 설정하지 않음
모든 Origin(*)을 무조건 허용
OPTIONS 요청을 처리하지 않음
Authorization 헤더를 허용하지 않음
쿠키 사용 시 Credentials 설정 누락
운영 환경에서도 개발용 설정 유지
이러한 설정은 보안 취약점이나 서비스 장애의 원인이 될 수 있습니다.
실무 활용 사례
React Spring Boot
Vue Node.js
Next.js FastAPI
Angular ASP.NET Core
모바일 앱 REST API
SaaS 플랫폼 외부 API
프론트엔드와 백엔드가 서로 다른 서버에서 운영되는 현대 웹 애플리케이션에서는 CORS 설정이 거의 필수입니다.
보안 전문가의 권장 사항
운영 환경에서는
필요한 Origin만 허용
최소 권한 원칙 적용
HTTPS 사용
민감한 API는 인증(Authentication) 적용
OPTIONS 요청 정상 처리
CORS 정책을 정기적으로 점검
이러한 원칙을 적용하면 보안성과 안정성을 함께 확보할 수 있습니다.
핵심 메시지
많은 개발자가 CORS를 “귀찮은 오류”라고 생각하지만,
사실 CORS는 웹 브라우저가 사용자와 서비스를 보호하기 위해 제공하는 핵심 보안 기능입니다.
CORS의 원리를 이해하면 프론트엔드와 백엔드 연동이 훨씬 쉬워지고, 디버깅 시간도 크게 줄일 수 있습니다.
한 줄 요약
“CORS 오류는 실패가 아니라, 브라우저가 당신의 웹 애플리케이션을 안전하게 보호하고 있다는 신호입니다.”
— 이춘곤(Mark) · ISC.studio · ISC출판 도서 안내
이 글은 저자의 Facebook에 처음 게시한 글입니다. Facebook 원문 보기
💬 댓글 (0)