React Proxy 설정하기

React Proxy 설정하기 

http-proxy-middleware 패키지를 사용해서 Proxy를 설정하는 방법에 대해서 살펴본다.

 

1. Proxy를 왜 설정하는 거지? 

 동일한 출처(도메인, 프로토콜, 포트)라면 이러한 설정없이도 요청해도 되지만, 동일한 출처가 아닌

 경우 요청을 보낼 때 CORS 이슈가 발생한다. 

 

여기서 CORS란 

Cross-origin Resource Sharing(교차 출처 리소스 공유) 의 약자로 추가 HTTP 헤더를 사용하여, 한

출처에서 실행중인 웹 어플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록

브라우저에 알려주는 제도이다.

 

따라서 CORS 이슈가 발생했다는 건 다른 출처에 접근할 수 있는 권한이 없다는 의미이다. 

 

이러한 문제를 해결하는 데 주로 사용하는 방법은 Proxy를 설정하는 것이다. 이것을 좀 쉽게 해주는

패키지인 http-proxy-middleware 를 이용하여 proxy를 설정하는 방법에 대해 알아보자! 

 

2. http-proxy-middleware

 1) 설치하기 

 일단 사용하려면 해당 패키지를 설치해줘야한다. 

 yarn add http-proxy-middleware 

 

 2) Proxy 설정하기

 setupProxy 이름으로 파일을 생성한 후 아래와 같이 작성해준다. 

 

 // CORS 이슈 해결
 const { createProxyMiddleware } = require('http-proxy-middleware');
 
 module.exports = function (app) {
   app.use(
     '/api',
     createProxyMiddleware({
       target: 'http://localhost:5000',
       changeOrigin: true,
     }),
   );
 };

먼저 http-proxy-middleware 패키지를 import해서 createProxyMiddleware 를 가져온다. 

그런 다음 createProxyMiddleware 함수의 인자로 위와 같이 작성해준다. 

 

target: 프록시할 서버의 url(index), 여기서는 localhost: 5000으로 설정해주었다. 

changeOrigin: 대상 서버 구성에 따라 호스트 헤더가 변경되도록 설정, true로 설정해준다.

 

이렇게 proxy로 설정해주면 /api로 시작되는 API는 target으로 설정된 url로 호출되어 전달된다.  

즉, 요청을 보낼 때, 클라이언트 port가 3000일때, localhost:3000/api/어쩌구 이런식으로 보내는 

것처럼 보이지만 proxy로 설정된 target에 명시된 url로 변환되어 요청이 보내진다.

 

이렇게 http-proxy-middleware 를 사용하면 쉽게 proxy를 설정할 수 있다.