[Typescript] CRA에서 http-proxy-middleware 사용법

React에서 상대경로에 대해 프록시를 통해서 Origin을 바꿔서 보낼 수 있다. 상대경로는 package.json의 옵션으로도 설정할 수 있지만, 오늘은 CRA 공식 홈페이지에서 소개하고 있는 http-proxy-middleware 에 대해 알아보자.

 

CRA에는 아래 파일만 src 폴더 하위에 생성만 하더라도 알아서 프록시 설정 다 해준다.

 

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

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

 

Typescript를 사용하지 않는 경우에는 문제 없이 설정이 잘 되는데,

 

https://github.com/chimurai/http-proxy-middleware

chimurai/http-proxy-middleware

 

다음 타입스크립트 예시대로 파일을 생성해주면 타입스크립트에서는 작동을 하지 않는다.

 

해결 과정

그러던 와중 CRA issue에서 답을 찾을 수 있었다. (2020년 3월 issue)

 

https://github.com/facebook/create-react-app/issues/8273

Issues setting up proxy for TypeScript CRA with TypeScript Express app · Issue #8273 · facebook/create-react-app

 

해당 내용은 https://github.com/facebook/create-react-app/issues/6794 에서 의견이 제기됐지만 아무도 그 이후에 PR을 올리지 않아서 지원하지 않는다는 내용이었다. 후.. 2021년 7월 14일 기준 Typescript template CRA는 http-proxy-middleware을 지원하지 않는다. 

 

그렇다면 어떻게 해야할까? 그냥 src/setupProxy.js 로 js파일을 작성해서 넣으면 된다. 알아서 CRA가 세팅해준다.

 

 

https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually

Proxying API Requests in Development | Create React App