Proxy, HTTP 통신

CORS 정책을 우회하여 에러를 해결하기 위해서 Proxy기능을 사용할 수 있다.
별도의 응답 헤더를 받을 필요 없이 proxy를 통한 우회요청, 우회 응답을 받음으로서 브라우저를 속이는것이다. 이렇게 함으로서 Cors Error을 회피할 수 있다.

Proxy의 사용법은

webpack dev server에서 제공하는 기능을 사용하려면, CRA를 통해 만든 리액트 프로젝트에서는 package.json에서 "proxy" : "우회할 API 주소" 를 입력함으로서 쉽게 적용할 수 있다. 이렇게 proxy를 통해 우회하게 되면, 기존의 fetch나 axios를 통해 요청하는 부분에서 우회할 API주소 도메인 부분을 제거한다.

React Proxy, http-proxy-middleware 라이브러리를 사용하려면 일단 npm install http-proxy-middleware을 통해 라이브러리를 설치해주고, src 폴더 안에setupProxy.js파일을 생성하여

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

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

방식으로 작성한다.
webpack dev server을 이용하는 방식과 같이 fetch / axios로 요청하는 부분에서 도메인을 제거해주어야한다.

여러 도메인에서 응답을 받아와야한다면,

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

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

  app.use(
    '/api2', 
    createProxyMiddleware({
      target: 'http://localhost:4000',
      changeOrigin: true, 
    })
  );
};

같은 방식으로 여러 도메인에서 프록시를 통해 응답을 받아올수도 있다.