"빨간 줄의 공포" CORS 에러 완벽 해결 가이드

"로컬에선 잘 되는데 서버에만 올리면 빨간 글씨가 떠요!"
웹 개발자라면 누구나 한 번은 마주치는 CORS(Cross-Origin Resource Sharing) 에러. 왜 발생하고 어떻게 해결하는지 핵심만 짚어드립니다.

1. CORS는 에러가 아니라 보안 정책입니다

CORS는 한 출처(Origin)에서 실행 중인 웹 애플리케이션이 다른 출처의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 브라우저는 기본적으로 동일 출처 정책(SOP)을 따르기 때문에, 다른 도메인으로의 요청을 기본적으로 차단하여 사용자를 보호합니다.

2. 어떻게 해결하나요?

가장 정석적인 방법은 서버에서 허용해주는 것입니다.

• Access-Control-Allow-Origin 헤더 추가: 서버 응답 헤더에 허용할 도메인을 명시합니다. (예: https://my-app.com)
• 프록시(Proxy) 설정: 개발 환경에서는 프론트엔드 서버가 대신 요청을 보내주는 프록시를 설정해 SOP를 우회할 수 있습니다.

💡 실무 노트

귀찮다고 서버 설정에서 Access-Control-Allow-Origin: * (와일드카드)를 사용하는 건 매우 위험한 행동입니다. 보안 구멍을 활짝 열어주는 꼴이거든요.

팁: 실무 운영 서버에서는 허용할 도메인 리스트(White List)를 관리하고, 해당 도메인만 접근할 수 있도록 꼼꼼하게 세팅해야 합니다. 또한, PUT이나 DELETE 같은 요청은 브라우저가 먼저 Preflight(OPTIONS) 요청을 보내 자격이 있는지 확인한다는 점도 기억해 두세요. 서버에서 OPTIONS 메소드에 대한 응답이 막혀있어도 CORS 에러가 날 수 있습니다.

"CORS 에러는 브라우저가 우리를 지키기 위해 내뱉는 비명입니다. 차근차근 허용 리스트를 점검해 보세요."