React 프로젝트에 Webpack DevServer Proxy 설정하기

문제 상황

로컬에서 React 개발 서버(localhost:3000)와 백엔드 API 서버(localhost:8000)를 분리해서 실행하다 보니 CORS 에러가 계속 발생했다. 백엔드 팀에서 CORS 설정을 추가하는 것보다 프론트엔드에서 프록시를 설정하는 게 개발 환경에서는 더 깔끔하다고 판단했다.

해결 방법

Create React App을 사용 중이라면 package.json에 간단히 추가할 수 있다:

{
  "proxy": "http://localhost:8000"
}

하지만 우리 프로젝트는 커스텀 Webpack 설정을 사용하고 있어서 webpack.config.js의 devServer 설정을 직접 수정했다:

module.exports = {
  // ...
  devServer: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
};

이제 프론트엔드에서 /api/users 로 요청하면 자동으로 http://localhost:8000/users로 프록시된다.

주의사항

• changeOrigin: true를 설정하지 않으면 일부 API 서버에서 Host 헤더 검증 때문에 요청이 거부될 수 있다
• pathRewrite는 선택사항이지만, API 경로 구조에 따라 유용하게 사용할 수 있다
• 프로덕션 빌드에는 적용되지 않으므로, 배포 시 환경변수로 API 엔드포인트를 관리해야 한다

재택근무가 시작되면서 로컬 개발 환경 설정이 더 중요해졌다. 팀원들에게도 공유해서 동일하게 적용할 예정이다.