Proxy 설정을 통해 로컬에서 개발중인 React와 서버 통신 설정하기

* 문제점

개발중인 프론트 클라이언트 서버(http://localhost:3000)과 백엔드 서버(http://localhost:8080)간 통신이 되지 않았다.

 

* 원인

백엔드 서버는 8080 포트, 리액트 개발 서버는 3000포트로 열려 있기 때문에 별도의 설정이 없이 API를 호출하려고 하면  CORS(Cross Origin Request) 오류가 발생한다.

 

해당 오류는 네트워크 요청을할 때 주소가 다른 경우에 발생하며, 일반적인 해결을 위해서는 백엔드 쪽에서도 API를 호출할 수 있도록 서버 쪽 코드를 수정해야 한다.

 

하지만 프로젝트를 완성했을 때 만약 동일한 호스트에서 서비스를 제공할 생각이라면 이러한 설정은 사실 불필요한 설정이다.

 

* 해결 방법

서버쪽 API 수정이 아닌 Proxy 설정을 통해 개발 서버로 요청하는 API들을 우리가 정해 둔 서버로 전달하고 응답을 웹 애플리케이션에서 사용할 수 있게 해준다.

 

1. npm 또는 yarn을 통해서 모듈 (http-proxy-middleware)을 다운로드 한다.

 

$ npm install http-proxy-middleware --save
$ yarn add http-proxy-middleware

 

2. src 경로에 setupProxy.js 파일을 생성하여 하기 내용을 붙여넣는다.

※ target 부분 포트는 본인이 설정한 백엔드 서버 포트로 설정한다.

 

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

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

 

3. API 호출을 해서 정상적으로 통신이 되는지 확인한다.

 

* REFERENCE

https://create-react-app.dev/docs/proxying-api-requests-in-development/

Proxying API Requests in Development | Create React App