react proxy 설정

Proxy

CORS를 거치는 정석적인 과정 없이 React 라이브러리, 혹은 Webpack Dev Server에서 제공하는 proxy 기능을 사용하면 CORS 정책을 우회할 수 있습니다. 이는 별도의 응답 헤더를 받을 필요 없이 브라우저는 React 앱으로 데이터를 요청하고, 해당 요청을 백엔드로 전달하게 됩니다

방법1 package.json

package.json에 proxy 설정하기

...
"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "http://localhost:포트번호"// 주소:포트번호
}

이후 fetch 나 axios로 호출할때

//proxy 설정 전
asnyc() =>{
  await fetch('http://localhost:포트번호/param')
}

//proxy 설정 후
asnyc() =>{
  await fetch('/param')
}

방법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(
    '/api2', //proxy가 필요한 path prameter를 입력합니다.
    createProxyMiddleware({
      target: 'http://localhost:5000', //타겟이 되는 api url를 입력합니다.
      changeOrigin: true, //대상 서버 구성에 따라 호스트 헤더가 변경되도록 설정하는 부분입니다.
    })
  );
};

호출 방법은 위와 동일

장점은 선택적으로 proxy를 이용 할 수 있다.
http://localhost:5000 의 /api2 로 시작하는 호출에만 proxy 설정 가능