webpack-dev-server로 프록시 설정하기

문제 상황

로컬 개발 환경에서 프론트엔드는 3000번 포트, API 서버는 8080번 포트로 띄워서 작업하고 있었다. 당연히 CORS 에러가 발생했다.

fetch('http://localhost:8080/api/users')
  .then(res => res.json())
  .then(data => console.log(data));
// Error: No 'Access-Control-Allow-Origin' header

백엔드 팀에 CORS 헤더 설정을 요청할 수도 있었지만, 개발 환경에서만 발생하는 문제였고 프로덕션에서는 같은 도메인을 사용할 예정이라 프론트엔드에서 해결하기로 했다.

해결 방법

webpack-dev-server의 프록시 기능을 사용했다.

// webpack.config.js
module.exports = {
  // ...
  devServer: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
};

이제 /api로 시작하는 요청은 자동으로 8080 포트로 프록시된다.

// 같은 포트로 요청하면 됨
fetch('/api/users')
  .then(res => res.json())
  .then(data => console.log(data));

changeOrigin: true 옵션은 Origin 헤더를 타겟 URL로 변경해준다. 일부 API 서버에서 Host 헤더를 체크하는 경우 필요하다.

추가 옵션

API 경로를 재작성해야 하는 경우도 있었다. 예를 들어 /api/v1/users를 /users로 보내야 할 때:

proxy: {
  '/api': {
    target: 'http://localhost:8080',
    pathRewrite: { '^/api': '' },
    changeOrigin: true
  }
}

간단한 설정으로 개발 환경의 CORS 문제를 해결했다. 프로덕션에서는 Nginx 등에서 동일한 방식으로 처리하면 된다.