Proxy

◎Proxy

: React앱이 서버로부터 받은 응답 데이터를 다시 브라우저롤 전달하는 방법을 쓴다.
=> 브라우저는 CORS 정책을 위반한지 모른다.
=> 브라우저를 proxy기능을 통해 속이는 것

‣Proxy 사용법

• webpack dev server proxy

  1. package.json에 "proxy"값을 설정

     ...
     },
      "proxy":"우회할 API주소"
     }

  2. 기존의 fetch, 혹은 axios를 통해 요청하던 부분에서 도메인 제거

• React Proxy 사용법

  1. http-proxy-middleware 라이브러리 설치
     npm install http-proxy-middleware --save
  2. 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, //대상 서버 구성에 따라 호스트 헤더가 변경되도록 설정하는 부분입니다.
      })
    );
  };

  3. 기존의 fetch, 혹은 axios를 통해 요청하던 부분에서 도메인 부분을 제거한다.

  ---

◎Proxy를 설정해 HTTP 통신하기

• api,api2와 my-app에 각각 npm install을 한다.
• api에는 npm run dev, my-app에는 npm run start를 하여 각각 서버를 연다.
  => CORS에러가 뜨며 응답을 제대로 받아오지 못한다.

‣webpack dev server proxy

• package.json에 "proxy"값을 설정한다.
• 기존의 fetch를 통해 요천하던 부분에서 도메인 부분을 제거한다.
  => 이 에러는 api와 my-app 서버를 껐다 다시 켜니 해결이 되었다!!

‣React Proxy

• http-proxy-middleware 라이브러리를 설치한다.
  npm install http-proxy-middleware --save

• src 파일 안에서 setupProxy.js 파일을 생성하고 코드를 작성한다.

  • 여러개의 도메인에서 응답을 받아와야하는 경우

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

    
    =>컴포넌트 생성

    
    => 2개의 도메인에서 모두 응답을 받아오는 것을 볼수 있다ㅎㅎ