Proxy

1. 프록시란

프록시(proxy)란 말 그대로 '대리'라는 의미로, 컴퓨터 네트워크에서 중간에 통신을 대리하여 주는 서버를 의미합니다. 쉽게 말해, 클라이언트와 서버 사이에 위치하여 클라이언트의 요청을 받아 이를 서버로 전달하고, 그 반응을 클라이언트에게 다시 전달하는 역할을 수행합니다.

2. 프록시의 기능

• 캐싱: 프록시 서버는 한번 서버로부터 받아온 데이터를 캐싱하여 저장해 두고, 동일한 요청이 오면 서버에 접속하지 않고 캐싱된 데이터를 제공합니다.

• 필터링: 프록시 서버는 사용자의 요청을 필터링하여 특정 웹사이트에 대한 접근을 제한할 수 있습니다.

• 로드 밸런싱: 여러 개의 서버가 서비스를 제공하는 경우, 프록시 서버를 이용하여 트래픽을 분산시킬 수 있습니다.

• 익명성 보장: 사용자의 IP 주소를 숨기는 역할도 수행할 수 있어, 사용자의 익명성을 보장합니다.

3. 프록시를 이용한 CORS 에러 해결

CORS(Cross-Origin Resource Sharing)는 다른 도메인으로부터 리소스가 요청될 경우, 이를 제한하는 보안 메커니즘입니다. 이는 기본적으로 보안을 위한 것이지만, 때때로 이로 인해 불편함을 겪는 경우가 있습니다. 이러한 상황에서 프록시를 활용하여 이 문제를 해결할 수 있습니다.

3-1. package.json

React에서는 package.json 파일에서 "proxy"라는 필드를 추가해 주는 것만으로도 간단하게 CORS 문제를 해결할 수 있습니다.

{
  "name": "your-app-name",
  "version": "0.1.0",
  "proxy": "http://localhost:5000",
  ...
}

여기서 "proxy" 값에는 백엔드 서버의 주소를 넣어줍니다. 이렇게 설정하면 개발 서버가 자동으로 임의의 백엔드 서버로의 API 요청을 재정의하여 CORS 문제를 해결해줍니다.

3-2. http-proxy-middleware

더 복잡한 설정이 필요한 경우, http-proxy-middleware를 사용할 수 있습니다. 이 패키지를 이용하면 특정 경로에 대해 프록시를 설정하거나, 여러 대의 서버로 요청을 보낼 수 있습니다.

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

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

위의 예제는 '/api'라는 경로로 들어오는 요청을 'http://localhost:5000'으로 리다이렉트하는 프록시를 설정하는 예제입니다.