CORS란?

CORS는 Cross-Origin Resource Sharing의 약자로, 웹 브라우저에서 다른 출처(origin)의 리소스를 요청할 수 있도록 하는 메커니즘입니다.

예를 들어, http://example.com 웹 사이트에서 http://api.com 서버에 데이터를 요청하는 경우, 이는 다른 출처의 리소스 요청이라고 할 수 있습니다.

CORS가 필요한 이유

그런데 왜 이런 메커니즘이 필요할까요? 바로 Same Origin Policy 때문입니다.
Same Origin Policy는 웹 보안의 핵심 원칙 중 하나로, 웹 브라우저는 같은 출처의 리소스만 공유할 수 있도록 제한합니다.

즉, http://example.com 웹 사이트에서는 http://example.com 서버에만 데이터를 요청하거나 응답받을 수 있습니다. 이렇게 하면 악의적인 웹 사이트가 사용자의 개인 정보나 쿠키 등을 탈취하는 것을 방지할 수 있습니다.

하지만 때로는 다른 출처의 리소스를 공유해야 하는 상황이 발생할 수 있습니다.

예를 들어, http://example.com 웹 사이트에서 http://api.com 서버에 있는 데이터를 활용하고 싶은 경우가 있을 수 있습니다. 이때 CORS가 필요합니다.
CORS는 웹 브라우저와 서버 간에 특별한 헤더(header)를 주고받아서, 서버가 특정 출처의 리소스 요청을 허용하도록 합니다.
http://api.com 서버는 Access-Control-Allow-Origin 헤더에 http://example.com 값을 넣어서 응답하면, 웹 브라우저는 http://example.com 웹 사이트에서 http://api.com 서버에 데이터를 요청할 수 있습니다.

프론트엔드와 백엔드

프론트엔드

프론트엔드에서는 웹 브라우저가 서버에 요청을 보낼 때, HTTP 헤더에 origin이라는 필드를 추가하여 자신의 출처를 알려줍니다.

백엔드

백엔드에서는 서버가 응답을 보낼 때, HTTP 헤더에 Access-Control-Allow-Origin이라는 필드를 추가하여 허용된 출처를 알려줍니다.
이때, 서버는 모든 출처를 허용할 수도 있고, 특정 출처만 허용할 수도 있습니다.

주의점

CORS는 웹 개발자들에게 유용한 기능이지만, 잘못 사용하면 보안 문제가 발생할 수 있습니다.

예를 들어, Access-Control-Allow-Origin 헤더에 * 값을 넣어서 모든 출처의 리소스 요청을 허용하면, 악의적인 웹 사이트가 사용자의 개인 정보나 쿠키 등을 탈취할 수 있습니다.

따라서 CORS를 사용할 때는 출처를 제한하거나 인증(authentication)과 같은 추가적인 보안 조치를 적용해야 합니다.