proxy 설정 방법

Prxoy

브라우저에서 출처가 다른, 즉 host 나 port 가 다른 백엔드 서버로 API 요청 시 호출할 때 발생할 수 있는 CORS 관련 오류를 방지하기 위해 proxy 를 설정해준다.

해당 proxy 설정을 통해 로컬 환경에서는 처리할 수 있지만, 추후 정적인 소스를 서버에 배포하여 API 요청을 하기 위해서는 nginx 나 apache 의 proxy 설정을 해주면 된다.

1. pakage.json 을 통한 설정

클라이언트 디렉토리의 pakage.json 파일에 proxy 를 추가해준다.

...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:5000",
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
...

2. http-proxy-middleware setupProxy.js 를 통한 설정

npm 이나 yarn 등으로 http-proxy-middleware 를 설치해준다.

npm install http-proxy-middleware 
yarn add http-proxy-middleware 

//client/src/setupProxy.js
const proxy = require('http-proxy-middleware');
module.exports = function(app){
  app.use(
    '/api',
    proxy({
      target: 'http://localhost:5000', //api 요청을 보낼 서버 주소
      changeOrigin: true,
    })
  );
};

proxy 설정을 추가해줌으로써 /api 로 시작되는 API 는 taget 으로 설정된 서버 주소로 호출하게 된다.

위 설정을 통해 axios 나 fetch 로 요청 시에 /api/hello 로 호출하게 되면
http://localhost:5000/api/hello 로 호출하게 된다.

changeOrigin 설정은 대상 서버 구성에 따라 호스트 헤더가 변경되도록 설정해준다.

참고
hoons-up.tistory.com/26