현재의 프로젝트에서 1개 이상의 오픈 API를 사용하기 위해 알게 된 http-proxy-middleware
오픈 API를 사용할 때, 항상 CORS 문제를 해결해줘야 한다.
단 한 가지의 오픈 API를 사용할 때는, React 환경에서 package.json 내에 proxy를 설정해줄 수 있었다.
하지만, 한 개 이상의 proxy를 그곳에 설정해줄 수가 없었다.
이걸 어떻게 설정을 해줘야할까?
처음에는 React 환경에서 http-proxy-middleware로 적용을 해줄 수가 있다해서, 인터넷 설명대로 코드를 넣어줬었다.
하지만, 로컬 브라우저에서는 ECONNREFUSED 에러만 뜰 뿐 이유를 알 수 없었다.
구글링을 열심히 하다가 이러한 글을 봤는데,
17이상 버전의 노드 환경에서는 DNS 조회 시 IPv4보다 IPv6를 우선적으로 사용하는 방식으로 바뀌었다고 한다.
그래서, localhost를 사용할 때 이름이 IPv6 주소인 ::1로 해석된다는 듯..?
반면, 서버는 IPv4 주소인 127.0.0.1로 수신 대기하고 있을 때 연결 실패가 된다고 한다.
이로 인해, proxy 설정에서 localhost 대신 127.0.0.1로 변경하라고 하는데.. 난 지금 localhost가 아니라 open API의 주소로 프록시 설정을 하고 싶기에 이건 내가 예상한대로 적용이 되지 않는다.
리액트에서 프록시 설정을 해주는 대신, 서버 환경에서 프록시 설정을 하는 방법을 생각해봤다.
http-proxy-middleware로 서버 쪽에서 여러 proxy 설정을 해줄 수가 있다!
이 라이브러리는 Node.js 환경에서 사용하는 미들웨어 라이브러리이다.
이는 프록시 요청을 처리하는데 쓰이는데, 서버가 API 요청을 다른 서버로 전달하고 클라이언트와 서버 통신을 중계하는 중계자 역할을 한다.
이 라이브러리를 쓰는 이유는 클라이언트로부터 오픈 API의 요청이 들어왔을 때, 그 백엔드 API 서버로 요청 전달을 하여 CORS 문제를 회피하게 해준다.
간단히 설정을 하여 쉽게 사용할 수 있기에 적용을 해봤다!
처음에는 npm install http-proxy-middleware로 설치해준다.
그 다음 서버 환경의 index 파일에서 createProxyMiddleware를 import해준다
그 다음 app.use (지금 나는 Express 사용 중) 에서 import한 createProxyMiddleware를 사용해준다
첫 번째 인자로는 클라이언트에서 요청할 때 뭐라고 붙여 보낼지 설정해준다.
두 번째 인자에는 createProxyMiddleware를 넣어주고 객체에 target, changeOrigin은 꼭 넣어준다!
여기서 target은 오픈 API의 base URL을 넣어주면 되고, changeOrigin은 true로 꼭 해줘야 CORS 문제를 회피할 수 있다!
그리고 그 밑에는 pathRewrite인데, 위에 첫 번째 인자로 넣어줬던 문자열은 API 요청 보낼 때 ""로 변경 즉, 없애고 요청을 보내달라는 뜻이다.
왜냐하면, 실제 오픈 API 요청 주소에는 /api/restaurants라는 문자열은 받지 않기 때문이다. 이건 그냥 클라이언트로부터 어떤 요청을 받을지에 대해 구분이 필요해서 이름을 저렇게 지은 것이다.
이렇게 설정을 하고 나면, 클라이언트는 어떻게 요청을 보내면 되는가
(여기서 axios 요청이 왜 api.get이냐면 다른 파일에 axios를 서버의 baseURL로 이미 create 해놨기에, import해서 사용 중이다
여기서 서버 baseURL은 현재 로컬로만 있기에 (http://localhost:8080) 같은 형태)
위의 사진에서 보이다 싶이, 아까 서버에서 proxy 설정해줄 때 넣어준 첫 번째 인자 문자열이 맨 앞에 오는 것을 볼 수 있다.
그 뒤에는 원하는 오픈 API의 요청 주소를 넣어주면 된다!
이렇게 요청을 보내면 클라이언트는 http://localhost:8080/api/restaurants ~ 이런 식으로 요청을 보내게 되는 거고, 프록시 서버는 이를 받아 http://실제 url/ ~ 이런 식으로 원하는 서버로 요청을 보내는 것이다.
그럼 CORS 문제 없이, 원하는 데이터를 받아 사용할 수가 있다!
여기서 갑자기 궁금한 점
왜 서버로 요청을 보낼 때 api를 붙여야 할까?
/api를 붙이는 건 RESTful API를 설계할 때 API 요청을 /api로 시작하는 것이 일반적이라고 한다.
이렇게 붙여 보냄으로써 API 요청이라는 것을 명확하게 구분 할 수가 있고, /api가 붙어 있지 않으면 웹페이지(HTML 문서) 요청을 하는 것이라고 알 수가 있다.
또한, 서버에서 CORS 정책을 해당 경로(/api)에 대해 보다 쉽게 설정할 수 있다고 한다.
이는 클라이언트와 서버 간의 통신의 보안 문제를 줄이는 데 도움이 된다고 함!
이렇게 proxy 설정을 여러 개 해주면 여러 오픈 API를 사용해도 CORS 문제가 발생하지 않는다 :)
