CORS란? (Cross-Origin Resource Sharing)

CORS란?

CORS(Cross-Origin Resource Sharing)는
서로 다른 Origin 간의 리소스 공유를 허용하는 표준 보안 우회 기술이다.

기본적으로 웹 브라우저는 보안상의 이유로 다른 출처(origin)의 리소스 요청을 차단한다.

CORS는 이러한 제약을 우회하여 다른 출처의 리소스에 접근할 수 있게 해준다.

---

Same-Origin Policy(SOP)란?

브라우저가 기본적으로 따르는 보안 정책이다.
→ 동일한 출처(origin)에서만 리소스를 공유할 수 있도록 제한한다.

Origin이란?

Origin은 다음 세 가지의 조합으로 구성된다:

• 프로토콜: http, https
• 호스트: localhost, naver.com 등
• 포트 번호: 80, 8080, 3000 등

이 중 하나라도 다르면 다른 Origin으로 판단되어 SOP에 의해 차단된다.

---

Preflight Request(프리플라잇 요청)

CORS 요청 중에서도 GET, POST 외의 HTTP 메서드(PUT, DELETE 등)를 사용하거나,
커스텀 헤더가 포함된 요청의 경우 브라우저는 본 요청을 보내기 전에 사전 확인용 요청(OPTIONS)을 보낸다. 이를 Preflight 요청이라고 한다.

동작 흐름:

1. 브라우저가 서버에 OPTIONS 메서드로 사전 요청 전송
2. 서버가 해당 요청을 허용하면, 브라우저가 본 요청을 실제로 보냄
3. 허용되지 않으면 브라우저가 요청을 차단

---

CORS 에러 해결 경험 (Spring Boot 프로젝트)

실제 프로젝트 개발 중, 프론트엔드(React)와 백엔드(Spring Boot)가
서로 다른 포트에서 실행되며 CORS 에러가 발생한 경험이 있다.

 

이 문제를 해결하기 위해,

• Spring의 설정 클래스를 만들고,
• 특정 Origin을 허용하도록 설정한 뒤,
• 프리플라잇 요청이 정상적으로 응답되도록 처리하였다.

이후 브라우저에서 더 이상 차단되지 않고 정상적인 API 요청이 가능해졌다.

---

요약

항목	설명
CORS	다른 출처 간 리소스 공유를 허용하는 웹 표준
SOP	브라우저의 동일 출처 보안 정책
Origin	Protocol + Host + Port 조합
Preflight	본 요청 전 OPTIONS 요청을 통해 허용 여부 확인
해결 경험	백엔드에서 특정 Origin을 허용해 브라우저 차단을 해소함

 

---

마무리

CORS는 단순한 에러처럼 보일 수 있지만,
웹 보안을 위한 핵심 메커니즘이며, 프론트와 백엔드가 분리된 환경에선
반드시 이해하고 설정할 수 있어야 하는 개념이다.