[React] Proxy

개발을 하다가 서버에서 api를 받아와야 할 때가 있다. 이 때 브라우저의 주소와 api의 주소가 일치하지 않으면 데이터를 받아올 수가 없다. 이는 CORS를 설정해 해결해야 하는데 이런 문제가 발생하는 이유는 보안 때문이다. 소중한 라이브 데이터의 유출을 막기 위해 CORS로 허가되지 않은 도메인에서는 데이터를 받을 수가 없도록 되어있다. 

이런 문제를 임시로 해결할 수 있는 방법이 proxy를 이용하는 것인데, 중요한 것은 proxy는 주소를 우회하여 데이터를 받아오는 방식이라 개발할 때에만 사용할 수 있고 배포 환경에서는 보안상의 이유 등으로 사용할 수 없다. 배포 시에는 결국 서버쪽 사람들과의 소통을 통해 해결해야 하는 것. 

proxy의 흐름은 이렇다. 브라우저에서 앱을 통해 데이터를 요청하고, 앱은 프록시로 우회하여 서버에 접근한다. 그럼 서버에서 다시 앱으로 프록시를 통한 허가 의사를 보내고, 그렇게 우회하여 받은 응답을 브라우저에 전달한다. 앱(프론트)에서 서버와 통신하기 때문에 브라우저가 직접 서버와 주소를 비교할 일이 없게 된다. 

 

사용 방법은 두 가지가 있다.

 

1. webpack dev server에서 제공하는 proxy 사용

 

package.json 파일에 proxy를 추가한다.

"proxy" : "우회할 API 주소"

 

api를 요청하는 곳의 도메인 부분을 지우고 params만 남긴다.

export async function getAllfetch() {
    const response = await fetch('/params');
    .then(() => {})
}

 

 

2. http-proxy-middleware 라이브러리 사용 (리액트)

 

설치

npm install http-proxy-middleware --save

 

React App의 src 폴더 안에 setupProxy.js 파일을 생성, 

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    //proxy가 필요한 path prameter를 입력.
    '/api', 
    createProxyMiddleware({
      //타겟이 되는 api url를 입력.
      target: 'http://localhost:5000',
      //대상 서버 구성에 따라 호스트 헤더가 변경되도록 설정.
      changeOrigin: true, 
    })
  );
};

그리고 1번에서처럼 api를 요청하는 곳의 도메인 부분을 지우고 params만 남긴다.

1번 방법은 전역적이지만 2번처럼 라이브러리를 이용하면 여러 서버에서 api를 받아오는 것도 가능하다.