Proxy(프록시) 간단하게 설정하는 방법! (+ proxy 간단 설명)

안녕하세요.

 

CORS 대신 proxy 를 사용해 클라이언트에서 서버 사용을 가능하게 하고, 더 편하게 만들어봅시다.

 

 

 

 

 

proxy란?

---

  -  클라이언트가 자기 자신 안에서 다른 네트워크 서비스에 간접적으로 접근하게 해주는 것.

 

  -  보통, 시스템이나 프로그램을 사용한 것을 proxy, 서버를 사용한 것은 proxy server 라고 하는데 요즘 거의 대부분은 proxy server를 사용하기 때문에 proxy server 를 proxy 라고 부르기도 합니다.

 

  -  즉, 클라이언트 -> 서버 로 바로 접근할 수 없고, 클라이언트 -> 프록시 -> 서버 과정을 통해 클라이언트가 서버에 접근할 수 있습니다.

   **** 자바스크립트는 정책 상 같은 출처(프로토콜, 도메인 이름, 포트) 로만 접근이 가능하기 때문에, React에서는 서버와 클라이언트가 포트가 다르기 때문에 정책에 위반되어 클라이언트가 서버에 접근할 수 없습니다.

 

  -  IP 세탁 및 차단 사이트 우회 접속을 위해 사용되기도 합니다. (고수들은)

 

  -  요즈음, proxy 서버를 사용해도 속도는 큰 차이가 없고, 오히려 프록시 서버 -> 서버 의 두 번의 접속이 필요해 잘 사용하지 않는다고 합니다. 

 

 

클라이언트 <-> 서버 접속 과정(출처 : 위키백과)

  -  위 그림에서, 왼쪽 인터넷은 서버(API URL), 오른쪽 인터넷은 클라이언트(www.maivve.tistory.com) 라고 하자.

 

  -  이 때, 클라이언트 인터넷 내에서 서버 API를 호출하기 위해 프록시 서버에 접근하고, 프록시 서버가 서버에 들어가서 결과 값을 가져옵니다. 이후, 이 값을 다시 클라이언트에게 전송합니다. 클라이언트는 그 결과를 받아 활용하고, 화면에 출력합니다.

 

 

 

React 에서는 왜 사용하려 하지?

---

  -  직접 서버에 접근하려하면 "No 'Access-Control-Allow-Origin' header is present on the requested resource." 오류가 발생하며 API 호출이 되지 않아 이를 해결하기 위해서.

 

  -  React 클라이언트에서 fetch, axios 등으로 서버와 통신할 때 서버의 절대 주소를 일일히 입력해야 하는 번거로움을 줄일 수 있어서.

 

 

ex.

fetch('http://localhost:3000/test')
  .then(res => res.json())
  .then(data => {
  alert(`test api 호출 : ${data.result}`);
});

  -  위와 같이, 절대 주소를 입력해야 합니다. 하지만 프록시를 설정해놓으면?

 

fetch('/test')
  .then(res => res.json())
  .then(data => {
  alert(`test api 호출 : ${data.result}`);
});

  -  앞 도메인 주소를 생략하고 뒷부분 URL만 작성해도 됩니다.

 

 

 

 

그럼, 설정하는 방법으로 넘어가겠습니다.

 

 

 

---

첫 번째 방법

  -  http-proxy-middleware 모듈 사용하기

  

  -  하지만, 더 쉬운 방법이 있습니다.

 

 

두 번째 방법

  -  package.json 파일 수정하기

  {

   ...

   "proxy" : "http://localhost:3000",

   ... 

  }

  -  이후, fetch나 axios 에서는 localhost:3000 이후의 URL만 작성해도 됩니다.

 

    ex. localhost:3000/test/app 호출 시 fetch('/test/app') 만 작성해도 됨

 

 

 

쉽고 간편하죠 ?!

 

 

 

 

감사합니다.