예를 들어 프런트엔드에서는 127.0.0.1:3000으로 테스팅을 하는데 백엔드 서버는 127.0.0.1:12010이라면 포트 번호가 다르기 때문에 CORS 에러가 나타납니다. 이때 프록시 서버를 둬서 프런트엔드 서버에서 요청되는 오리진을 127.0.0.1:12010으로 바꾸는 것이죠.

참고로 127.0.0.1이란 루프백 IP로, 본인 PC의 IP를 뜻합니다. localhost나 127.0.0.1을 입력하면 DNS를 타지 않고 바로 본인 PC로 연결됩니다.

▲ 그림 1-21 프록시 서버 이용 후

앞의 그림처럼 프런트엔드 서버 앞단에 프록시 서버를 놓아 /api 요청은 users API, /api2 요청은 users API2에 요청할 수 있습니다. 자연스레 CORS 에러 해결은 물론이며 다양한 API 서버와의 통신도 매끄럽게 할 수 있는 것이죠.

참고로 CORS에 대한 자세한 설명은 필자가 만든 영상(https://bit.ly/3KfzrBh)을 참고하기 바랍니다.