나를 화나게하는 CORS 넌 뭐니!?

김태인·2022년 8월 29일

Cross-Origin Resource Sharing cors sop

CORS오류를 처음접했을때에 멘붕을 잊을수가 없다...
정확한 오류메세지를 뿌려주는것이 아닌 포괄적인 오류메세지가 나오다보니 한참을 헤멨던 기억이 난다

웹개발을 진행하다보면 필수로 접하게되는 오류 CORS를 알아보자

CORS란?

Cross Origin Resource Sharing (교차 출처 리소스 공유)
한 사이트에서 주소가 다른 서버로 요청을 보낼 때 자주 접하는 오류
서로 다른 출처끼리 정보요청과 반환이 가능하도록 하는것이 CORS

어디서 문제가 발생하나?

Postman에서 테스트 할때는 잘 진행되다가도 웹사이트에서 보내다보면 자주 해당 오류를 자주 접하게된다
웹사이트에서 AJAX 요청을 보낼때 문제가 생김
크롬이나 엣지, 사파리같은 브라우저에서 일어나는 문제임 = 즉 프론트엔드 문제

CORS가 있는 이유

서로 다른 출처끼리 요청을 주고받는건 안되는것이 원래 기본값이였음 (ex 브라우저에 저장된 나의 session을 탈취/해킹 하여 타 정보의 사이트의 개인정보를 빼갈 수 있는 위험이 있기 때문)
그러나 웹 생태계가 자유로워짐에 따라 여러 서비스들간에 보다 자유롭게 정보를 주고받을 필요가 생김
사실 브라우저의 요청을 막고 있는건 SOP (Same-Origin Policy) 동일 출처 정책
CORS는 반대로 막고있는 요청을 풀어주는 역할
즉 합의된 출처들간에 합법적으로 허용해주기 위해 CORS가 생겨난 것

어떻게 해결하나?

요청을 받는 백엔드쪽에서 이것을 허락할 다른 출처들을 미리 명시해줌으로써 해결해줄 수 있다
일반적인 방법으로 별표(*) 와일드카드를 집어넣으면 누구나 쓸 수 있게됨
네이버 지도 API등의 서비스들도 콘솔에 들어가보면 CORS를 허용해줄 주소들을 지정하는 페이지를 찾을 수 있음

cross-origin 즉 다른 출처끼리의 요청이 보내질때에는 요청에 Origin이라는 header를 추가함
데이터가 다른곳을 전송될 때 데이터의 맨 앞쪽에 붙은 보충 정보로써 받는 쪽의 IP주소, 사용할 프로토콜이나 옵션등이 담김 (우편으로 치면 봉투에 적힌 내용)
header의 Origin항목에는 요청하는 쪽에 scheme과 도메인, 그리고 포트가 담김
scheme이란 요청할 자원에 접근할 방법 http, ftp, talnet등을 말하며 프로토콜이라고도 함
ex) https://gomunity.shop 이라면 https가 scheme, gomunity.shop이 도메인, 그리고 뒤에 붙진 않았지만 :443등이 붙어있다면 그것이 포트임
이 요청을 받은 네이버 지도 API서버는 답장의 헤더에 지정된 Access-Control-Allow-Origin 정보를 실어서 보냄
만약 나의 도메인이 등록된 상태면 그 URI도 들어있고 브라우저가 비교하여 오리진에 보낸것과 같은것이 있다면 안전하다고 판단하고 교차출처를 허용하는 것
토큰 등 사용자 식별 정보가 담긴 요청에 대해서는 좀더 엄격한데 보내는 측의 요청의 옵션에 credentials 항목을 true로 세팅해야 하며 받는쪽에서도 와일드카드가 아닌 보내는 쪽의 출처 즉 웹페이지 주소를 정확히 명시한 후 Access-Control-Allow-Credentials 항목을 true로 맞춰줘야함
귀찮을 수 있겠지만 브라우저에 저장된 쿠키가 탈취당해 나쁘게 쓰일 수 있기 때문에 양쪽이 조건을 잘 갖추는 것