CORS(Cross-Orgin Resource Sharing) 정책은 무엇일까?

CORS(Cross-Origin Resource Sharing)는 동일한 도메인에서는 자유롭게 리소스를 사용할 수 있게 하고, 다른 도메인의 리소스는 보안 상의 이유로 제한하는 정책입니다. 개발을 하다 보면 간혹 마주치는 문제이기도 한데요. 오늘은 CORS가 어떤 이슈이고 어떠한 방법으로 해결할 수 있는지 알아보겠습니다.

CORS(Cross-Origin Resource Sharing) 이슈

CORS 정책은 같은 도메인에서는 자유롭게 리소스를 요청하고 사용할 수 있지만, 다른 도메인은 보안 상의 이유로 리소스 사용을 제한합니다. 앞서 이야기드린 것과 같이 CORS(Cross-Origin Resource Sharing)는 동일한 도메인의 자원은 자유롭게 사용하고, 다른 도메인 리소스 요청을 제한하는 정책입니다. 

 

 개발을 하다 보면 자신이 호스팅 되고 있는 도메인뿐만 아니라 다른 도메인 API를 호출하거나 이미지, 스크립트 파일을 가져오는 등의 작업이 필요합니다. 하지만 이러한 작업은 보안 상의 이유로 제한되게 됩니다. 브라우저는 리소스 요청 시 HTTP 헤더를 확인하여 요청한 도메인이 서버에서 허용한 도메인과 일치하는지 확인합니다. 만약 일치하지 않는다면 브라우저에서는 리소스 요청을 차단합니다. 이와 유사한 이슈로는 CORB(Cross-Origin Read Blocking)가 있습니다.

 

 다시 말해 CORS는 웹 애플리케이션을 개발할 때 자주 보게 되는 이슈 중에 하나로 다른 도메인으로부터 데이터를 가져오거나 API를 사용하는 경우 등에 발생합니다. 이 문제를 해결하기 위해서는 서버 측에서 CORS 정책을 설정하거나, 클라이언트 측에서 JSONP(JSON with Padding) 등의 방법을 사용하여 CORS를 우회하는 방법이 있습니다.

CORS 문제를 해결하는 방법

CORS 문제는 보안 정책은 직접적으로 외부 서버에 접근해서 발생하는 이슈입니다. CORS를 해결하는 방법으로는 다음과 같은 방법이 있습니다.

 

- JSONP 사용하기

JSONP(JSON with Padding)는 script 태그를 이용하여 다른 서버에서 데이터를 가져오는 방법입니다. 일반적으로 JSONP를 사용하기 위해서는 호출하는 API에서도 JSONP를 지원해야 합니다. JSONP는 간단하게 사용할 수 있기 때문에 CORS 문제를 쉽게 해결할 수 있지만, JSONP는 보안상의 문제가 있을 수 있고 호출하는 서버에서 JSONP를 지원하지 않는 경우에는 사용할 수 없습니다.

 

- 프록시(Proxy) 서버 사용하기

프록시 서버를 사용해 클라이언트 측에서 보내는 요청을 서버 측에서 대신 받아서 요청을 보내고, 서버에서 보내는 응답을 클라이언트 측으로 전달합니다. 그렇게 되면 브라우저는 서버가 아닌 프록시 서버에 요청을 한다고 판단하기 때문에 CORS 문제가 발생하지 않게 됩니다.

 

- Access-Control-Allow-Origin 헤더 설정

응답하는 서버에서 CORS를 허용해 주는 설정을 하면 별도의 작업을 하지 않고 서버 리소스에 접근할 수 있습니다. API 서버 CORS를 허용하는 방법은 Access-Control-Allow-Origin 헤더를 설정하면 됩니다. Access-Control-Allow-Origin는 다른 도메인에서의 접근을 허용해 줄 때 쓰이는 설정 값입니다. 다만 JSONP나 프록시 서버와 같이 프로세스를 변경해서 쓸 수 있는 방법이 아닌 통신을 하는 대상 서버에서 설정이 가능하기 때문에 응답 서버를 수정할 수 있는 조건에서 사용이 가능합니다.