4/4 일일정리 Proxy

CORS(Cross Origin Resource Sharing)

일반적으로 다른 도메인에 API 요청을 하면 CORS 에러가 발생한다. CORS(Cross Origin Resource Sharing) 정책은 다른 도메인에서의 혹시나 모를 악의적 접근을 방지하기 위한 정책이다. 보안상 중요한 정책이지만 클라이언트에서 매번 요청을 할 때 마다 헤더를 입력해줘야 하기 때문에 약간의 불편함이 있다.

 

Proxy

Proxy 기능을 사용하면 클라이언트에서 브라우저를 거쳐 서버로 요청하는것이 아니라 Proxy서버를 거쳐서 바로 서버로 요청을 보낼 수 있다. 별도의 응답 헤더를 받을 필요 없이 브라우저는 React 앱으로 데이터를 요청하고, 해당 요청을 백엔드로 전달하게 되고 여기서 React 앱이 서버로부터 받은 응답 데이터를 다시 브라우저로 전달하는 방법을 쓰기 때문에 브라우저는 CORS 정책을 위반한지 모르고 같은 출처로 판단하게 된다. 

일반적인 요청과 Proxy를 통한 요청 -- 출처 : 코드스테이츠

 

Proxy 사용 실습

React app에서 Proxy를 사용하는 방법 중  2가지를 실습해보았다.

 

Webpack dev server proxy

Webpack dev server에서 제공하는 proxy 기능을 사용하는 방법이 있다. webpack dev server의 proxy를 사용하게 되면, 브라우저 API를 요청할 때 백엔드 서버에 직접적으로 요청을 하지 않고, 현재 개발서버의 주소로 우회 요청을 하게 된다. 그러면 웹팩 개발 서버에서 해당 요청을 받아 그대로 백엔드 서버로 전달하고, 백엔드 서버에서 응답한 내용을 다시 브라우저쪽으로 반환한다.

 

기존에 일반적인 fetch요청을 하도록 작성된 앱에서는 CORS 에러가 발생한다.

 

우리가 보통 사용하는 CRA(Create React App)에서는 package.json 파일 가장 하단에 proxy 값을 설정하면 쉽게 사용할 수 있다.

proxy값을 설정하고, 기존에 있던 fetch요청에서 도메인 부분(proxy에 등록한 부분)을 제거하면 된다.

 

proxy 서버를 통해서 데이터를 받으면 브라우저는 같은 출처로 판단하여 CORS 오류가 발생하지 않는다.

 

http-proxy-middleware 라이브러리 사용

http-proxy-middleware 라이브러리를 사용하여 proxy를 설정해줄수도 있다.

기존에 작성했던 package.json 의 proxy는 지우고, src 폴더에 새로운 파일 setupProxy.js를 만들어준다.

* 파일이름을 setupProxy.js로 해야한다. 정해진 문법같은것

이번에 서버 2개를 사용하여 각각 도메인에 요청을 해서 데이터를 가져올것이기 때문에 2개의 도메인을 전부 등록한다.

그리고 요청을 하는 함수도 도메인을 빼고 작성해준다.

 

각각의 버튼을 눌러보면 데이터 요청이 CORS 오류 없이 잘 작동하는것을 볼 수 있다.