boilerplate(client) - Cors 이슈 해결 & Proxy 설정

따라하며 배우는 노드, 리액트 기본 강의를 듣고 정리한 내용입니다.

 

 

Cors

개념

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

 

웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행한다.

 

하지만 보안 상의 이유로 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한한다.

즉, 이 API를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야 한다.

 

적용

boilerplate에서 server는 5000번 포트, client는 3000번 포트를 이용하기 때문에 client에서 server로 요청을 보낼 때 Cors 이슈가 발생한다.

따라서 이를 해결하기 위해 Proxy를 사용한다.

 

 

Proxy Server

개념

프록시 서버란 인터넷 상의 여러 네트워크들에 접속할 때 중계 역할을 해주는 프로그램 또는 컴퓨터를 말한다.

프록시는 리퀘스트를 가로챈 뒤(intercepts) 리스폰스를 돌려준다. 이렇게 가로챈 리퀘스트를 전달 및 수정이 가능하다.

 

적용

Cors 이슈를 해결하기 위해 proxy를 server와 client 사이에 두고 이를 통해 요청을 전달함으로써 Cors 이슈를 해결한다.

 

 

Proxy 구현하기

1. http-proxy-middleware 설치하기

proxy를 설정하기 위해 http-proxy-middleware를 설치한다.

설치를 위한 명령어는 다음과 같다.

 

npm install http-proxy-middleware --save

 

2. setupProxy.js 생성 & 구현

src 폴더 아래에 setupProxy.js 파일을 생성한다.

이후 아래 소스코드에 원하는 작업을 구현하면 된다.

 

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

module.exports = function(app) {
  // ...
};

 

boilerplate에서 server의 포트 번호는 5000번이기 때문에 target을 http://localhost:5000 으로 설정하였다.

 

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

 

위 코드를 해석해보자면, /api로 시작되는 요청은 http://localhost:5000 으로 프록시된다는 뜻이다.

changeOrigin 옵션은 true일 경우 host header의 출처를 target URL로 변환시켜준다.

 

 

 

setupProxy.js에 대한 자세한 설명은 다음 페이지에서 확인할 수 있다.

https://create-react-app.dev/docs/proxying-api-requests-in-development/

Proxying API Requests in Development | Create React App