24.2.3.2 프록시 설정

현재 백엔드 서버는 4000 포트, 리액트 개발 서버는 3000 포트로 열려 있기 때문에 별도의 설정 없이 API를 호출하려고 하면 오류가 발생합니다. 이 오류를 CORS(Cross Origin Request) 오류라고 부르는데요. 네트워크 요청을 할 때 주소가 다른 경우에 발생합니다. 이 오류를 해결하려면 다른 주소에서도 API를 호출할 수 있도록 서버 쪽 코드를 수정해야 합니다. 그런데 최종적으로 프로젝트를 다 완성하고 나면 결국 리액트 앱도 같은 호스트에서 제공할 것이기 때문에 이러한 설정을 하는 것은 불필요합니다.

그 대신 프록시(proxy)라는 기능을 사용할 것입니다. 웹팩 개발 서버에서 지원하는 기능인데요. 개발 서버로 요청하는 API들을 우리가 프록시로 정해 둔 서버로 그대로 전달해 주고 그 응답을 웹 애플리케이션에서 사용할 수 있게 해 줍니다.

▲ 그림 24-23 프록시