프론트엔드와 백엔드가 나뉘어 처음 협업하는 과정에서 한번쯤은 꼭 겪는 문제 사항이 생긴다. 주로 백엔드 서버만 임시로 배포해두고, 그를 기반으로 프론트엔드가 작업 할 때 많이 발생하는데,
어, 왜 백엔드에서 데이터를 못 받아오지?
개발자 도구를 열어보면 콘솔에 다음과 같은 메세지가 여러분을 기다리고 있다.
CORS policy에 의해 Request가 Block되었단다. 이 상황을 한번도 겪어보지 않은 갓 입문한 개발자들은 혼란에 빠진다. 백엔드 개발자도 Postman을 통해 테스트 할 땐 정말 잘 작동했기 때문에 이제서야 안된다고?
CORS가 뭔데?
CORS는 Cross-Origin Resource Sharing의 약자인데... 당장은 이름이 중요한게 아니다.
브라우저에서 실행되는 웹 어플리케이션에서, 다른 도메인(백엔드 서버와 같은)으로 Resource(Data, API Call과 같은)를 요청할때 발생하는 보안 정책이다.
여러분이 개발중인 로컬 환경과, 배포된 백엔드 서버는 당연하게도 같은 아이피에 속하지 않는다. 이렇듯 다른 Origin(도메인)으로 요청을 보내는걸 보안상 차단시킨다.
이를 동일 출처 정책(Same-Origin Policy)라고 한다. 로컬 환경에서 백엔드 서버도 키고, 프론트엔드 서버도 켜두면 잘 작동한다. (두 서버 모두 같은 Origin에 속하니까!)
그래서 어떻게 고치죠?
나는 CORS를 버그처럼 고친다고 표현하는게 아주 옳은 표현이라고 생각하진 않는다.
정책을 따르지 않아 생긴 오류기때문에, 요청을 받는(백엔드) 서버가 요청을 하는(프론트엔드)서버를 허용시켜주면 된다.
CORS 정책은 다음과 같은 HTTP 헤더로 제어된다.
Origin: 브라우저가 현재 웹 페이지의 출처를 이 헤더에 포함하여 요청합니다.
Access-Control-Allow-Origin: 서버에서 응답으로 이 헤더를 설정하여 특정 도메인의 요청을 허용할 수 있습니다. 웹 사이트 A에서의 요청을 허용하기 위해 서버가 이 헤더를 포함시켜야 합니다.
Access-Control-Allow-Methods: 허용되는 HTTP 메서드를 지정합니다(예: GET, POST, PUT, DELETE 등).
Access-Control-Allow-Headers: 허용되는 HTTP 헤더를 지정합니다.
Access-Control-Expose-Headers: 브라우저가 접근할 수 있는 헤더를 지정합니다.
Access-Control-Allow-Credentials: 인증 정보를 요청에 포함할 것인지 여부를 지정합니다(기본적으로는 쿠키와 인증 헤더는 CORS 요청에 포함되지 않습니다).
Access-Control-Max-Age: 사전 요청(Preflight)의 캐시 시간을 지정합니다.
말투를 보면 알겠지만 GPT 시켰다. 나도 모두 사용해 보진 않았고, 주로 Origin과 Methods, 그리고 Allow-Headers 정도만 설정해서 쓰는 것 같다.
Origin에는 허용할 Origin(프론트엔드 서버 주소)를, Methods에는 GET, POST와 같은 걸 써주면 된다.
이 과정은 프레임워크마다 다르기 때문에 구글에 XXX CORS 설정이라고 검색하면 정말 자세히 나올 것이다. XXX엔 여러분이 사용 중인 프레임워크를 쓰자.
이렇게 하면 누군가 본인의 서비스에서 여러분의 백엔드 데이터와 API를 훔쳐 써서 AWS 요금이 불어나는 슬픈 상황은 발생하지 않을것...같지만!
어? 근데 POSTMAN은 잘 되는데?
CORS를 처음 만났을 때 당황스러운 이유 중 하나가 POSTMAN에선 문제가 생기지 않는다. 백엔드 담당자가 서버를 배포하고, POSTMAN으로 배포한 서버에 테스트를 해봤을 땐 정말 잘 작동한다.
어떻게 이런 일이?
왜냐하면 CORS 정책을 따라 Request를 차단하는 주체는 브라우저다. 브라우저가 아닌, 서버에서 서버로 날아가는 건 CORS와는 무관하다.
그렇다면 반쪽짜리 보안 정책 아닌가요?
그렇게 말한다면 맞다. CORS 만으로 모든 게 해결이 가능한 행복한 상황은 슬프게도 일어나지 않는다. 따라서 추가적인 보안을 설정하기 위해선, 서버 측에서 토큰을 사용한다거나, 권한을 검사하는 등 다른 방법들을 추가해야 한다.
요약
CORS는 다른 도메인으로 보내는 요청을 원칙적으로 차단하는 보안 정책이다. 이는 요청을 받는 도메인 측에서 특정 또는 모든 도메인을 허용함으로써 관리할 수 있다.
CORS 정책으로 인한 Request 차단은 브라우저가 한다. 따라서 서버-서버에서는 CORS의 작동을 기대할 수 없다.
