오늘은 webpack dev sever의 Proxy기능과 http-proxy-middleware의 proxy 기능을 활용하여 데이터를 받아 왔다.
CORS
proxy를 알아보기 전에 배웠던 CORS를 다시 한 번 생각해 보자
cors란?
교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제.
출처가 다르면 리소스에 접근할 수 있는 권한이 없기 때문에 서버에서 특정 도메인을 지정하여 자원을 접근할 수 있도록 설정을 해주어야 한다.
하지만 이런 정석적인 방법 말고도 proxy를 사용하여 CORS를 우회하여 데이터를 받아올 수 있다.
proxy를 사용하는 이유
proxy를 사용하는 이유는 React앱에서 브라우저를 통해 API를 요청할 때 , proxy를 통해 서버로 요청을 우회하여 보낸다. 그러면 서버는 응답을 React앱으로 보내고, React앱은 받은 응답을 서버 대신에 브라우저로 전달하게 된다. 이렇게 되면 출처가 같아지기 때문에 CORS에러가 발생하지 않고 통과 한다.
webpack dev server 의 proxy 사용법
먼저 package.json 파일에서 proxy를 작성해 준다.
보통 마지막 줄에 작성 한다.
그 후에는 fetch를 해오는 곳에서 우회할 api주소를 제외한 뒤의 params만 남긴다.
이렇게 하면 proxy 사용 끝!
http-proxy-middleware 사용법
해당 라이브러리를 사용하기 전에 설치를 먼저 해준다.
npm install http-proxy-middleware --save
먼저 src 폴더에 setupProxy.js 파일을 생성 후에 사진과 같이 작성 해준다.
설치한 http-proxy-middleware를 import 해준 후
app.use 첫 번째 인자 /api부분은 proxy가 필요한 path parameter를 입력해준다.
두 번째 인자로는 createProxyMiddleware를 사용하여
target 부분에는 우회할 api 주소를 입력해주고,
changeOrigin은 대상 서버 구성에 따라 호스트 헤더가 변경되도록 설정하는 부분이다.
2개의 API데이터를 가지고 오고 싶으면 똑같이 다른 API주소를 설정하여 작성해주면 된다.
setupProxy.js 파일의 작성이 끝난 후에는 webpack-dev-server의 proxy설정과 똑같이 fetch에 /params만 남기고 우회하는 API주소는 지워주면 된다.
