CORS, 크로스 오리진
웹개발을 하다보면 많이 보는 에러 중 하나이지만 매번 볼 때마다 헷갈려서, 다시 한번 정리해본다.
오늘날 브라우저에서는 보안 목적으로 클라이언트가 URL 과 동일한 오리진의 리소스로만 request 를 보낼 수 있도록 허용한다.
(클라이언트 URL 의 프로토콜, 포트, 호스트 이름 모두 클라이언트가 요청하는 서버와 일치해야 함)
하지만 웹에서 다른 오리진의 리소스 (예를 들어 폰트, 이미지, 오브젝트 파일 등) 를 가져와야 하는 경우가 있다. 여기서 클라이언트에서 실행하고 있는 브라우저 URL 을 현재 오리진이라고 하고, 호출하는 다른 오리진 (써드파티 URL) 을 크로스 오리진이라고 한다.
이 때, 별다른 설정을 하지 않으면 크로스 오리진 요청은 기본적으로 거부되며 브라우저에서 에러가 발생한다.
이를 허용하기 위해서는 크로스 오리진 요청을 받는 서버단 (써드파티 URL) 에서 크로스 오리진 리소스 공유 설정을 해야 한다.
예를 들어,
www.myexample.com 이라는 오리진 사이트에서 www.thirdparty.com 리소스에 액세스 하는 경우, www.thirdparty.com 에서 myexample.com 를 허용된 오리진 목록에 추가하여 CORS (Cross Origin Resource Sharing) 헤더를 구성해야 한다. 그러면 myexample.com 에서 thirdparty.com 으로 리소스를 요청할 수 있으며, 브라우저에서는 thirdparty.com 에 대해 응답을 받으면 크로스 오리진 접근을 허용한다.
참고: https://aws.amazon.com/ko/what-is/cross-origin-resource-sharing/
