[Develop/React] proxy 수동 설정(setupProxy)

proxy 수동 설정(setupProxy)

브라우저에서 출처가 다른 즉 host나 port가 다른 백엔드 서버로 API 요청 시 호출할 때 발생할 수 있는 CORS 관련 오류를 방지하기 위하여 Proxy를 설정하여 준다. 간단하게 설정하는 방법과 수동으로 커스터마이징하는 방법을 정리한다.

해당 proxy 설정을 통하여 로컬 환경에서는 처리하지만 추후 정적인 소스를 서버에 배포하여 API요청을 위해서는

nginx나 apache의 proxy 설정을 해주면 된다. 

혹 netlify를 사용했다면 netlify에서도 아래와 설명할 pathRewrite 설정 할 수 있으니 알맞게 설정하면 된다.

 

테스트는 VLOEERT BLOG에서 API 예시를 사용했다.

첫번째 방법 package.json를 통한 설정

  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "https://jsonplaceholder.typicode.com"

두 번째 방법 http-proxy-middleware setupProxy.js를 통한 설정

먼저 위에 설정을 수동 설정으로 바꾸기 위해서 http-proxy-middleware설치
npm http-proxy-middleware 이동

npm install http-proxy-middleware // npm 사용 일 경우
yarn add http-proxy-middleware // yarn 사용 일 경우

setupProxy.js 파일을 src 밑에 생성 후 아래와 같이 프로젝트 proxy 설정을 커스터마이징 해준다.

const proxy = require('http-proxy-middleware');

// src/setupProxy.js
module.exports = function(app) {
    app.use(
        proxy('/posts', {
            target: 'https://jsonplaceholder.typicode.com', // 비즈니스 서버 URL 설정
            changeOrigin: true
        })
    );
};

proxy 설정을 추가해줌으로 /api로 시작되는 API는 target으로 설정된 서버 URL로 호출하도록 설정된다.
위 설정을 통해서 axios나 fetch로 요청 시에 /posts/1로 호출하게 되면
https://jsonplaceholder.typicode.com/posts/1 로 호출하게 된다.

changeOrigin 설정은 http-proxy 모듈의 설명과 같이 대상 서버 구성에 따라 호스트 헤더가 변경되도록
설정하여 준다.

http-proxy-middleware v1.0 이후 수정

http-proxy-middleware가 최근 버전을 업데이트하면서 proxy 설정이 아래와 같이 변경되었으니
해당 모듈 문서와 option들을 확인해보자.

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

module.exports = function(app){
  app.use(
      createProxyMiddleware('/api', {
          target: 'https://jsonplaceholder.typicode.com',
          changeOrigin: true
      })
  )
};

pathRewrite 설정

pathRewrite는 서버 API [https://jsonplaceholder.typicode.com/posts/1 이라고 가정했을 때
프론트엔드에서 호출 시에는 API에 특정 URL 규칙을 만들어 가독성을 높이고 싶거나 다수의 proxy를
추가해야 할 업무상 프로세스가 존재할 경우 화면에서 API URL path를 말 그대로 대체해주는 역할을 한다.
아래와 같이 설정할 경우 axios나 fetch 설정 시 /api/posts/1로 호출하게 되면 api는 '' 공백으로 대체되어 호출하게 된다.

// src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(
        createProxyMiddleware('/api', {
            target: 'https://jsonplaceholder.typicode.com',
            changeOrigin: true,
            pathRewrite: {
                '^/api': '' // URL ^/api -> 공백 변경
            }
        })
    );
};