Proxy
CORS 정책 필요 이유
CORS : 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용해 한 출처에서 다른 출처가 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제
출처 : 접근할 때 사용하는 URL의 스킴(프로토콜), 호스트(도메인), 포트로 정의
두 객체의 스킴, 호스트, 포트가 모두 일치할 때 같은 출처를 가졌다고 한다.
라이브 데이터(live data) : 실제 서비스되고 있는 앱의 DB에 적재되고 있는 데이터
라이브 데이터는 민감성이 높은 데이터들 위주의 데이터로 보안이 가장 중요하다.
하지만 모든 출처의 접근을 허락하게 되면 이런 보안성이 낮아지고 해킹 위험에 노출된다.
그렇기때문에 우리는 모든 도메인을 허용하면 안되고 특정 도메인을 허용하도록 구현해야한다.
프론트엔드 개발자가 백엔드 개발자에게 개발 서버 도메인을 허용해 달라고 요청하고, 백엔드 개발자는 응답헤더에 필요한 값들을 담아 전달해 줘야 한다.
Proxy
React라이브러리나 Webpack Dev Server에서 제공하는 proxy기능을 사용해 CORS 정책을 우회할 수 있다.
별도의 응답헤더를 받을 필요 없이 브라우저는 React앱으로 데이터를 요청하고, 해당 요청을 백엔드로 전달한다.
React앱이 서버로부터 받은 응답 데이터를 다시 브라우저로 전달하기 때문에 브라우저는 CORS 정책을 위반했는지 모르게 된다.
Proxy 적용 전
Proxy 적용
내용 참조, 출처 : 코드스테이츠
이미지 출처 : 코드스테이츠
