프론트엔드에서 백엔드 서버로 요청을 보낼 때 CORS 에러가 발생하는걸 흔하게 볼 수 있습니다.
이러한 CORS 에러가 발생하는 이유와 에러 해결을 위한 방법 그리고 SOP도 같이 알아보겠습니다.
Origin / 출처
- SOP / Same-Origin Policy
- CORS / Cross Origin Resource Sharing
SOP와 CORS에서 공통적으로 확인할 수 있는 Origin은 URL에서 Protocol/Host/Port를 합친 것을 의미하며 이렇게 3가지가 같을 때 동일 출처로 판단합니다.
SOP ?
동일 출처 정책은 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호 작용할 수 있는 방법을 제한하는 중요한 보안 메커니즘입니다.
잠재적 악성 문서를 격리하여 가능한 공격 벡터를 줄이는 데 도움이 됩니다.
예를 들어 인터넷의 악의적인 웹사이트가 브라우저에서 JS를 실행하여 (사용자가 로그인 한) 타사 웹메일 서비스나 회사 인트라넷(공용 IP 주소가 없어 공격자의 직접적인 접근으로부터 보호)에서 데이터를 읽고 공격자에게 전달하는 것을 방지합니다. - 출처:MDN
CORS ?
교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다.
웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다.
교차 출처 요청의 예시: https://domain-a.com의 프론트 엔드 JavaScript 코드가 XMLHttpRequest를 사용하여 https://domain-b.com/data.json을 요청하는 경우.
보안 상의 이유로, 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한합니다. 예를 들어, XMLHttpRequest와 Fetch API는 동일 출처 정책을 따릅니다. 즉, 이 API를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야 합니다. - 출처:MDN
SOP / 같은 출처
같은 출처끼리만 요청을 보낼 수 있게하는 중요한 보안 메커니즘
CORS / 다른 출처
다른 출처에도 요청을 보낼 수 있게 할 수 있는 방법
즉, 브라우저는 보안을 위해 이러한 정책을 사용하고 있으며 CORS 에러가 나오는 이유는 CORS 자체가 에러 메세지가 아니라 동일 출처 정책(SOP)이 요청을 막았으니 CORS를 설정하면 다른 출처라도 요청을 보낼 수 있게 허용해준다는 의미입니다.
서로 다른 출처끼리 요청을 주고 받는건 안되는게 기본값이였다.
요청을 받는 백엔드 쪽에서 이걸 허락할 다른 출처들을 미리 명시해두면 된다.
백의 대표적인 프레임워크/라이브러리 스프링, 장고 익스프레스 등의 문서에서 CORS 옵션을 넣는 방법이 나와있다.
