[CORS] Cross-Origin Resource Sharing(CORS)는 왜 발생하는가?

글을 시작하며…

웹페이지를 작업하는 개발자들 중 백엔드와 프론트엔드를 API로 통신하지 않고 JSP, 타임리프 같은 템플릿 엔진을 사용하여 로컬에서 작업할 때 localhost로만 작업하는 경우에는 cors에 대한 문제를 겪을 일이 없을 것이다.

다만, MSA 환경이 요구되어 이에 대한 스터디를 진행하거나 API통신으로 react, vue와 같은 프론트엔드 프레임워크에 데이터를 주고 받기 위한 작업을 진행할 시 backend서버에서 테스트케이스는 정상 동작하나 프론트와 연결만 하면 에러가 발생하는 경우가 발생할 수 있으며 이때 cors에 대한 오류를 마주칠 수 있다.

이에 대한 해결책은 여러 블로그에 쉽게 나타나있다. 특히 나는 스프링을 API서버로 활용하고 있으므로 WebConfiguration 을 설정해주거나 Security에서 받아들일 수 있도록 설정하기, 또는 브라우저 익스텐션을 통한 해결 방법이 있으므로 손 쉽게 이해하지 않고도 넘어갈 수 있었다.

하지만 스프링으로 security를 설정하는 과정에서 어떻게 cors가 걸리게 되는 지에 대해서 궁금증을 갖게 되었고 이에 대해서 알아보기 시작했다.

1. 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 헤더를 포함한 응답을 반환해야 합니다.