ReactJS | Proxy

Proxy

사전적 의미 proxy: 대리
Proxy를 설정한 서버를 Proxy Server라고 함
원래 서버의 대리 역할을 수행하는 서버가 됨

---

서버가 2개 일 때 발생하는 문제들

데이터 서버: php, Django, JSP etc.
클라이언트 서버: React Dev Server
클라이언트는 특별히 서버가 필요 없지만 create-react-app이 개발 서버를 제공
​→ 두 서버에 각각의 PORT 번호를 설정함으로써 각 서버를 식별할 수 있도록 함
​→ 여러 가지 문제 발생

• 개발 시에는 fetch API 등으로 ('http://localhost:8000/api_path')와 같은 경로로 서버에 데이터를 요청하지만
  배포 시에는 '/api_path' 이외의 주소가 있다면 에러 발생
• CORS(Cross-Origin Resource Sharing)
  기본적으로 서버는 같은 서버에서만 데이터를 가져올 수 있기 때문에
  다른 서버에서 데이터를 교차로 가져오는 경우 CORS를 위반함으로써 에러 발생
• Cookie
  서버에서 로그인 기능 구현 시 클라이언트의 브라우저로 Cookie를 전송하는데
  서버가 2개라면 자동으로 쿠키를 불러오지 못하게 됨

※ 위와 같은 문제들을 해결하기 위해 proxy를 사용하게 됨

---

Proxy 사용 시 이점

• 데이터 요청 시 URI만 작성할 수 있게 되며 데이터 요청에 실패하면
  자동으로 proxy에 설정된 포트로 데이터를 요청함
• 교차 출처 금지 원칙에 위배되지 않음
  즉, CORS 에러가 발생하지 않게 됨
• Cookie를 자동으로 공유할 수 있게 됨

---

사용 방법

package.json 파일에 다음과 같이 작성
PORT는 데이터 서버의 번호로 지정

{
    ...
    "proxy": "http://localhost:PORT"
    ...
}

※ fetch('URL')에서 URI 부분 즉, '/' 이하의 부분만 작성하면 됨

---

출처 강의: 생활코딩 Create React App - Proxy [https://www.youtube.com/watch?v=VaAWIAxvj0A]