💡CORS
웹 브라우저의 동작방식에 따르면 다른 출처의 리소스에 접근하는 것을 금지한다.
우리는 이럴 때를 해결하고자 CORS방식으로 허가된 다른 출처의 접근을 허용하도록 설정해 줄 수 있다.
CORS의 preflight방식으로 요청을 보냈을 때이다.
Preflight 요청을 보내서 서버측에 CORS 설정이 되어있는지 확인하고, 설정이 되어있으면 실제 요청에 대한 응답을 보내주는 방식이다.
하지만, 우리는 종종 CORS설정 때문에 다른 API에서 정보를 받아올 때 에러에 직면하게 된다.
http, https 프로토콜의 차이와 같은 문제들 때문에, CORS 설정을 잘 했음에도 불구하고, CORS에러가 나는 경우가 있다.
이럴 때, CORS설정을 우회할 수 있는 방법이 있다.
그것이 바로 Proxy이다.
💡 Proxy
위의 사진은 proxy 사용 전, 데이터를 받기위해 서버에 요청을 보내는 절차를 도식화 한 것이다.
Frontend 쪽에서 브라우저에 요청을 보내면 브라우저는 Server 즉, Backend 쪽에 Client로부터 받은 요청을 서버에 전달하면서 접근권한이 있는 지 확인한다.
만약, 접근권한이 없다면 서버는 브라우저에 CORS에러를 보내줄 것이고, 접근 권한이 있다면 200OK라는 HTTP 메세지와 함께 요청한 리소스를 응답으로 전달할 것이다.
브라우저는 CORS에러를 받을 경우, 클라이언트의 요청을 파기하고, 200OK를 받았을 경우, 요청한 리소스를 클라이언트 쪽에 전달한다.
그렇다면, 어떻게 Proxy를 사용해서 CORS설정을 우회할 수 있을까?
클라이언트는 브라우저에 요청을 보내는 것이 아닌, Proxy를 통해서 바로 서버에 요청한다.
서버는 클라이언트가 우회하여 보낸 요청에 대한 응답을 다시 Proxy를 통해서 바로 클라이언트에게 전달한다.
이 상태에서 클라이언트는 서버로부터 받은 응답을 다시 브라우저에 요청으로 보낸다.
그러면, 브라우저가 봤을때는 서버와 같은 출처의 리소스이기 때문에 SOP에 위반되지 않기 때문에 CORS에러를 보내지 않게 된다.
자, 그러면 이제 Proxy를 통해 통신하는 방법을 어떻게 코드로 구현하는지에 대해서 알아보자!
🔍 webpack dev server proxy
🔍 React Proxy
