웹에서 만나는 CORS, 쉽게 이해하고 똑똑하게 대처하는 법

CORS, 왜 이렇게 자주 듣게 될까요?

웹 개발을 하시다 보면 ‘CORS 오류’라는 말을 한 번쯤 들어보셨을 것입니다. 처음에는 생소하게 느껴질 수 있지만, 실제로는 우리가 매일 사용하는 웹사이트의 보안과 직결된 아주 중요한 개념입니다. 마치 집에 들어갈 때 현관문을 잠그는 것처럼, CORS는 웹에서 데이터가 오가는 문을 지키는 역할을 합니다. 그런데 이 문이 너무 엄격하면, 정당한 손님도 들어오지 못하게 막히는 일이 생기죠. 그래서 오늘은 CORS가 무엇인지, 왜 필요한지, 그리고 어떻게 해결할 수 있는지 쉽고 자세하게 안내해 드리겠습니다.

CORS의 기본 원리: 브라우저의 안전벨트

CORS(Cross-Origin Resource Sharing)는 ‘교차 출처 리소스 공유’라는 뜻을 가지고 있습니다. 쉽게 말해, 한 웹사이트(예: www.example.com)에서 다른 도메인(예: api.another.com)의 데이터를 요청할 때 발생하는 보안 정책입니다. 웹 브라우저는 기본적으로 보안을 위해 ‘동일 출처 정책(Same-Origin Policy)’을 적용합니다. 즉, 같은 출처(도메인, 프로토콜, 포트가 모두 동일)에서만 리소스를 자유롭게 주고받을 수 있도록 제한하는 것이죠.

하지만 현대 웹 서비스는 다양한 외부 API와 데이터를 연동해야 하므로, 이 제한이 너무 엄격하게 느껴질 수 있습니다. 그래서 등장한 것이 바로 CORS입니다. CORS는 서버가 특정 출처의 요청을 허용할지 말지 결정할 수 있도록 해줍니다. 예를 들어, 서버가 “이 도메인에서 오는 요청은 괜찮아요!”라고 허락하면, 브라우저는 데이터 교환을 허용합니다. 반대로 허락하지 않으면, 브라우저는 요청을 차단하고 ‘CORS 오류’ 메시지를 띄웁니다.

CORS 오류, 왜 발생할까요?

웹 개발을 하다 보면 “Access to fetch at ‘https://api.another.com’ from origin ‘https://www.example.com’ has been blocked by CORS policy”와 같은 오류 메시지를 보신 적 있으실 겁니다. 이 오류는 브라우저가 보안을 위해 외부 도메인과의 데이터 교환을 막았다는 뜻입니다. 그럼 어떤 상황에서 이런 오류가 발생할까요?

API 서버가 허용하지 않은 출처에서 요청할 때

서버에서 CORS 관련 헤더(Access-Control-Allow-Origin 등)를 누락했을 때

자격 증명(쿠키, 인증 토큰 등)을 포함한 요청에 대해 서버가 적절히 응답하지 않을 때

즉, 서버와 클라이언트(브라우저) 간에 신뢰 관계가 제대로 설정되지 않았을 때 발생하는 문제입니다. 마치 초인종을 눌렀는데 집주인이 “누구세요?”라고 물어보는 것과 비슷하죠.

CORS 해결법: 실전 가이드

CORS 오류를 해결하는 방법은 여러 가지가 있습니다. 각각의 상황에 따라 적합한 방법을 선택하셔야 합니다.

1. 서버에서 CORS 허용 헤더 추가하기
가장 확실한 방법은 서버에서 적절한 CORS 헤더를 추가하는 것입니다. 예를 들어, Node.js(Express)를 사용하신다면 다음과 같이 설정할 수 있습니다.

javascript
app.use((req, res, next) => {
res.header(‘Access-Control-Allow-Origin’, ‘https://www.example.com’);
res.header(‘Access-Control-Allow-Methods’, ‘GET, POST, PUT, DELETE’);
res.header(‘Access-Control-Allow-Headers’, ‘Content-Type, Authorization’);
next();
});
이렇게 하면 ‘https://www.example.com’에서 오는 요청만 허용하게 됩니다. 만약 모든 출처를 허용하고 싶으시다면 ‘*’로 설정할 수도 있지만, 보안상 권장하지 않습니다.

2. 프록시 서버 활용하기
개발 환경에서 임시로 CORS 문제를 우회하고 싶으시다면, 프록시 서버를 활용하는 방법도 있습니다. 예를 들어, 프론트엔드에서 직접 외부 API를 호출하는 대신, 자신의 서버를 통해 우회해서 요청을 보내는 방식입니다. 이렇게 하면 브라우저 입장에서는 동일 출처로 인식되어 CORS 오류가 발생하지 않습니다.

3. 브라우저 플러그인이나 설정 변경(비추천)
일부 개발자분들은 CORS 오류를 임시로 해결하기 위해 브라우저 확장 프로그램이나 설정을 변경하기도 합니다. 하지만 이 방법은 보안에 취약할 수 있으므로, 실제 서비스에서는 절대 사용하지 않는 것이 좋습니다.

CORS와 보안: 허술하면 안 되는 이유

CORS 정책을 무시하거나 모든 출처를 허용하는 것은 마치 집 문을 활짝 열어두는 것과 같습니다. 악의적인 사이트가 사용자의 정보를 탈취하거나, 원치 않는 행동을 하게 만들 수 있기 때문입니다. 따라서 CORS 설정은 항상 최소한의 허용 범위로 제한하는 것이 중요합니다. 꼭 필요한 출처만 지정하고, 인증이 필요한 요청에는 추가적인 보안 조치를 취하셔야 합니다.

마치며: CORS, 어렵지 않습니다

처음에는 CORS가 복잡하고 까다롭게 느껴질 수 있습니다. 하지만 원리를 이해하고, 적절한 해결책을 적용하면 더 안전하고 유연한 웹 서비스를 만들 수 있습니다. CORS는 웹의 안전벨트이자, 개발자의 든든한 보안 파트너입니다. 앞으로 CORS 오류를 만났을 때 당황하지 마시고, 오늘 배운 내용을 바탕으로 차근차근 해결해 보시기 바랍니다. 웹 개발의 길에서 CORS는 피할 수 없는 동반자이니, 친해지면 분명 든든한 힘이 되어줄 것입니다.