포트가 다른 두 서버 연결하기

클라이언트 서버와 백엔드 서버를 나눠서 개발할 때, 두 서버의 포트가 달라서 CORS 정책에 의해 통신을 할 수 없게 된다. 이때 두 서버를 연결해 주는 방법은 여러 가지가 있는데, 프록시 Proxy 를 사용해 보도록 하겠다.

CORS 교차 출처 리소스 공유

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다. .… 보안 상의 이유로, 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한합니다. 예를 들어, XMLHttpRequest와 Fetch API는 동일 출처 정책을 따릅니다. 즉, 이 API를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야 합니다.

MDN 에 써있다. 간단하게 다른 출처의 리소스를 받을 때 보안을 고려해 요청을 막는 것이다.

http-proxy-middleware

먼저 npm 으로 http-proxy-middleware 를 다운로드하고, client/src/ 안에 setupProxy.js 파일을 하나 만들어 준다.

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

나는 백엔드 서버를 5000, 클라이언트 서버를 3000번 포트로 지정해 놔서 target 에 5000번 포트를 넣어 준다.

이제 axios.get() 으로 /api/ 이하의 주소에 정상적으로 접근할 수 있다 !