TypeScript & CRA - http-proxy-middleware 이슈

우리는 Proxy이 장점을 이용하거나 CORS 정책 문제를 해결하기 위해서나 개발에서 proxy를 활용합니다. 그러나 이번 시간에 typeScript로 Proxy를 설정하려고 했으나, 되지 않아서 어떤 문제가 있는지에 대해 이번 시간 작성하려고 한다.

---

Proxy

프록시를 설정하기 위해서는 다음의 npm에서 제공하는 http-proxy-middleware를 활용해 설정을 한다.

npm

http-proxy-middleware

 

TypeScript Doc

Proxying API Requests in Development | Create React App

install

npm install http-proxy-middleware --save

npm을 이용해 설치를 한다. 그리고 다음과 같이 typeScript를 이용해서 설정해서 개발을 진행하려고 했으나, 따로 오류가 발생하지 않았지만 제대로 동작하지 않아 그 이유를 한참 찾았다.

 

반응형

---

TypeScript - SetupPorxy.ts

현재 React와 TypeScript에 대해 공부하고 있어 이번 Proxy설정을 TypeScript이용해서 설정하려고 다음과 같이 작성했다.

setupProxy.ts

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

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

 

위와 같이 TypeScript를 이용해서 작성을 했는데 따로 오류가 나지 않고 실행은 되지만 우리가 원하는 Proxy가 제대로 동작하지 않는다.

다음과 같은 블로그에서 나와 같은 사람을 찾았는데 이분도 CRA과 TypeScript를 이용해 개발하려고 했으나 되지 않았고, 이는 아직

2022년 3월 27일 현재까지 setupProxy.ts에 대한 문제를 위한 해결을 아직 TypeScript CRA에서 지원하지 않아서 이런한 문제가 발생한다고 한다.

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

 

해결하기 위해서는?

TypeScript로 만들었던 setupProxy.ts -> setupProxy.js로 작성하면 동작합니다.