Proxy

728x90

Proxy란?

: 유저가 인터넷에 요청을 보낼 때 직접 보내는 것이 아니라 Proxy 서버를 거쳐 최종 목적지에 전달하게 한다.

이때 Proxy 서버를 거치면서 유저의 IP를 바꿀 수 있다.

즉, 유저의 실제 IP와 포트를 알 수 없도록 하는 것이 Proxy 서버의 역할이다.

React 프로젝트에서 Proxy로 CORS 해결하기 (Local)

: CORS는 위에서 설명한 것처럼 처음 리소스를 요청한 주소와 다를 때 발생한다.

그렇다면 Proxy 서버를 거쳐서 처음 리소르를 요청한 주소와 동일하게 한다면 오류는 사라지지 않을까??

터미널에 Proxy 미들웨어 패키지를 설치한다.

npm install http-proxy-middleware

클라이언트와 서버에 포트를 같게 하기 위하여 위처럼 코드를 작성한다.

위 코드는 /api라는 주소로 요청을 보낼 땐 localhost:5000으로 바꿔 요청을 보낸다는 것이다.

결과적으로 클라이언트와 서버는 완전히 같은 리소스이기 때문에 CORS가 발생하지 않는다.

이 글의 출처의 작성자의 클라이언트는 3000 포트이고, 서버는 5000 포트였다.

Proxy를 거치면 5000 포드로 보내게 된다.

Cors란 무엇인가?

CORS(Cross-Origin Resource Sharing)는 교차 출처 리소스 공유라는 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 즉, 무분

tried.tistory.com

React에서 사용하는 방법

CRA 프록시 서버 설정하는 방법 - React

또한 개발 서버는 불안정하기 때문에 언제든지 URL이 바뀔 가능성이 다분한데, 그 때마다 하나하나 수정을 하기에는 매우 불편합니다. 하지만 proxy를 사용한다면 proxy가 사용된 package.json만 변경

ljh86029926.gitbook.io

728x90

비 오는 날 개구리