CORS 정책에 관하여 - 이해와 해결 방법

CORS(Cross-Origin Resource Sharing)는 웹 보안 정책으로, 웹 애플리케이션이 서로 다른 출처(도메인, 프로토콜, 포트)에 있는 리소스에 접근할 때 발생할 수 있는 보안 이슈를 방지하기 위해 설계되었습니다. CORS는 브라우저에서만 적용되며, 클라이언트가 특정 서버로 데이터를 요청할 때, 서버가 요청을 허용할지 여부를 결정합니다.

이 글에서는 CORS가 어떻게 작동하는지, 그리고 왜 백엔드에서의 요청은 CORS에 문제가 없는지를 설명합니다.

1. CORS란 무엇인가?

CORS는 Cross-Origin Resource Sharing의 약자로, 한 웹사이트가 자신과 다른 출처의 리소스에 접근할 때 발생하는 보안 정책입니다. 출처(Origin)는 도메인, 프로토콜, 포트를 조합한 값으로, 예를 들어 http://example.com과 https://example.com은 서로 다른 출처입니다.

기본적으로 웹 브라우저는 보안상의 이유로 다른 출처의 리소스에 대한 요청을 차단합니다. 이를 방지하기 위해 서버는 클라이언트에게 특정 출처에서의 요청을 허용하는지 응답 헤더에 명시합니다.

CORS의 주요 개념

1. Origin: 요청이 발생한 출처를 나타냅니다.
2. Access-Control-Allow-Origin: 서버가 허용한 출처를 명시하는 응답 헤더입니다.
3. Preflight Request: 클라이언트가 서버에 본 요청을 보내기 전에 OPTIONS 메서드로 허용 여부를 묻는 과정입니다.
4. Simple Request: CORS 사전 검사가 필요 없는 요청으로, 주로 GET, POST, HEAD 메서드를 사용합니다.

2. CORS의 작동 방식

CORS 정책은 브라우저에서 실행되며, 서버는 클라이언트의 Origin 헤더를 보고 해당 출처에서의 요청을 허용할지 여부를 판단합니다. 브라우저는 기본적으로 다른 출처의 요청을 차단하지만, 서버가 응답에 Access-Control-Allow-Origin 헤더를 포함하면 해당 출처에서의 요청을 허용하게 됩니다.

예시

• 클라이언트가 http://localhost:8080에서 네이버 CLOVA API(https://api.clova.ai)에 요청을 보내면, CLOVA 서버는 클라이언트의 Origin을 확인합니다.
• 만약 CLOVA 서버가 localhost:8080을 허용하지 않으면 CORS 오류가 발생하며 요청이 차단됩니다.

Access to XMLHttpRequest at 'https://api.clova.ai' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

이러한 메시지는 서버가 해당 출처의 요청을 허용하지 않았음을 의미합니다.

3. CORS가 발생하는 이유

• 브라우저 요청: 브라우저는 클라이언트에서 API 요청을 보낼 때 자동으로 Origin 헤더를 추가합니다. 서버는 이를 확인하고, 허용된 출처만 응답을 허용합니다.

• 백엔드 또는 curl 요청: 반면, 서버 간 요청이나 터미널에서의 curl 명령어로 보내는 요청은 CORS 정책에 영향을 받지 않습니다. 서버 간 통신은 브라우저의 보안 정책을 우회할 수 있기 때문에, CORS 정책이 적용되지 않습니다.

4. CORS 문제 해결 방법

1) 백엔드를 통해 요청하기

• 브라우저가 아닌 백엔드 서버가 CLOVA API로 요청을 보내고, 그 응답을 클라이언트로 전달하는 방법입니다. 백엔드와 외부 서버 간의 요청에서는 CORS 정책이 적용되지 않기 때문에, 클라이언트가 브라우저에서 직접 CLOVA API에 요청하는 대신 백엔드를 거쳐 요청하면 문제가 해결됩니다.

2) ngrok과 같은 터널링 도구 사용

• 개발 중에는 로컬 서버를 외부에서 접근 가능한 도메인으로 만들어주는 ngrok 같은 도구를 사용할 수 있습니다. ngrok을 통해 로컬 서버를 외부로 노출시켜 네이버 CLOVA API에서 허용할 수 있는 도메인으로 변경할 수 있습니다.

3) CORS 프록시 서버 사용

• 개발 중에만 임시로 CORS 프록시 서버를 사용할 수 있습니다. 이 방식은 클라이언트 요청을 대신 처리해주고 CORS 문제를 해결해줍니다. 하지만 보안상 이유로 운영 환경에서는 사용하지 않는 것이 좋습니다.

5. 결론

CORS는 서로 다른 출처에서 리소스를 요청할 때 발생하는 보안 정책입니다. 브라우저에서 요청할 때는 자동으로 Origin 헤더가 추가되어 서버가 이를 검토한 후 허용된 출처만 응답을 받을 수 있습니다. 반면, 서버 간 요청이나 curl과 같은 명령줄 도구를 사용할 때는 CORS 문제가 발생하지 않습니다.

운영 환경에서는 백엔드 서버를 통해 요청을 중계하는 방식으로 CORS 문제를 해결하는 것이 가장 안전한 방법입니다.

---

참고 자료

• CORS 정책 개요 - MDN Web Docs
• 네이버 CLOVA OCR API 사용하기