webpack-dev-server로 CORS 피하기

특정 사내 도구의 SPA 마이그레이션 챌린지를 할 때의 이야기

로컬 환경에서 API 서버와 webpack-dev-server를 실행하면서 개발하면 포트 차이로 CORS 요청을 처리해야 합니다.

이번 프로덕션에서 CORS 사용하는 것은 생각해 왔으므로, 개발 환경만 대응하는 것도 귀찮습니다.
반대로 상용 시스템 따위 CDN 경유로 배포하고 CORS 전제라면 개발 환경도 맞추는 것이 좋다고 생각합니다.
실제의 회피 방법입니다만, API 서버측으로부터 정적 파일을 돌려주면(자) 회피할 수 있습니다. 그러나, 오토 리프레쉬등의 편리 기능이 webpack-dev-server 에는 들어가 있으므로 이쪽을 이용하고 싶은 곳입니다.
그래서, 회피 수단을 찾고 있었던 곳 webpack-dev-server 에 proxy 기능이 있었으므로 이것으로 어떻게든 합니다.
webpack.config.js 에 이런 식으로 씁니다

devServer: {
    contentBase: path.join(__dirname, 'dist'),
    port: 3000,
    proxy: {
        '/api': {
            target: 'http://localhost:5000', // local api server
            pathRewrite: {'^/api' : ''} // rewrite
        }
    }
},

이제 webpack-dev-server 의 /api 다음에 대한 요청을 api 서버(localhost:5000)에 프록시해 줍니다.
경로도 다시 쓰기 때문에 API 서버 측은 변경하지 않아도 됩니다.


이것이

이렇게 됩니다.

편리!!