어떤 URL을 접근할 때, 브라우저에 URL에 입력하거나 postman, curl 등에는 정상적으로 동작하는 요청이, 유독 브라우저가 렌더링한 프론트엔드에서 ajax로 호출이 안되는 현상이 있다. 이때 콘솔에서는 CORS란 에러메시지가 노출된다.
이 문제의 원인이자 차단의 주체는 바로 브라우저이다.
CORS의 정의와 필요성
브라우저 내부에서는 매우 치명적인 데이터가 많다. 예를 들면, 로그인을 한 후 서버는 로그인 정보를 세션으로 가지고 있으며, 해당 세션에 대한 키로 쿠키를 브라우저에 저장한다. 만약 해당 쿠키를 복제할 경우 그 사람이 로그인을 한 것처럼 서비스를 사용할 수 있다. 그러므로 브라우저 입장에서 내부 데이터에 대한 접근 제어와 데이터 전송은 매우 중요하다.
예를 들면,
고객이 shop.com에 접근하여 로그인을 하였다. 로그인에 대한 쿠키가 생성되었다.
shop.com의 어떤 게시글이 script 태그를 허용했고 여기에서는 hack.com으로 API를 호출하는 AJAX가 있었다.
hack.com은 탈취한 쿠키를 가지고 shop.com에 로그인한다.
위와 같은 문제를 방지하기 위하여 브라우저는 SOP(Same-Origin policy)란 규칙을 기반으로 같은 출처가 아닌 도메인으로의 AJAX를 막는다.
CORS(Cross-Origin Resource Sharing)는 SOP의 제한 범위를 설정하기 위해 사용한다. 서버가 헤더 ‘Access-Control-Allow-Origin’를 통해 클라이언트에 응답한다. 기본적으로는 https://shop.com과 같이 매우 제한적으로 사용하는 것을 권장하며 필요에 따라 추가할 수 있다. 그럼 브라우저는 해당 헤더를 기준으로 다른 도메인에 대한 AJAX 여부를 결정한다.