CORS: 교차 출처 리소스 공유 정책 이해하기

1. CORS(Cross-Origin Resource Sharing)란?

CORS는 웹 브라우저가 보안을 위해 동일한 출처(Same Origin)가 아닌 다른 출처의 리소스에 접근하는 것을 제한하거나 허용하는 정책입니다.

2. 출처(Origin)의 기준

URL에서 프로토콜(Protocol), 호스트(Host), 포트(Port) 세 가지가 모두 일치해야 동일한 출처로 간주합니다.

• Example URL: https://www.naver.com:443/api/signup?page=1
• Origin 파트: https:// (Protocol) + www.naver.com (Host) + :443 (Port)

3. 왜 이 오류를 자주 만나는가?

현대적인 웹 개발 방식인 Frontend(예: Vue, 8080포트)와 Backend(예: Spring, 8081포트) 분리 구조 때문입니다. 브라우저는 사용자의 정보를 보호하기 위해 8080 서버에서 받은 페이지가 8081 서버로 데이터를 요청하는 것을 기본적으로 차단하며, 이때 발생하는 것이 바로 CORS 오류입니다.

4. 해결 방법

서버(Backend) 측에서 “이 출처(Origin)로부터 오는 요청은 안전하니 허용하겠다”라는 응답 헤더(Access-Control-Allow-Origin)를 추가해 줌으로써 브라우저에게 안심해도 된다고 알려주어야 합니다.

---

CORS는 우리를 괴롭히는 버그가 아니라, 악의적인 사이트로부터 내 정보를 보호하려는 브라우저의 최소한의 보안 장치입니다.