Proxy란? Express 서버에서 Proxy 설정 가이드 | http-proxy-middleware

 

 

1.  
2. proxy 개념
3. proxy 서버 프로세스
4. Express 서버 Proxy 설정
   1. Proxy를 사용하여 Cors를 우회하는 이유
5. http-proxy-middleware 버전 비교
   1. 1 버전 (e.g. 0.17.4)
   2. 2버전 (e.g. 2.0.6)
   3. 3버전 (3.0.0)

 

---

 

proxy 개념

• 중개서버로, 서버와 클라이언트 사이에서 요청을 중개하는 역할을 한다.
• proxy서버를 사용하면, 브라우저가 직접 다른 도메인에 접근하는 것이 아니라 프록시 서버가 실제 API서버에 요청을 보냄으로 cors를 우회할 수 있다.
• 예를 들면 https://test1.com의 서비스를 https://test2.com에서 요청하기 위해 test2에서 proxy서버로 요청하면, 클라이언트가 요청을 보낸 도메인과 프록시 서버가 요청을 보낸 도메인이 같기 때문에 CORS 정책이 적용되지 않고, proxy서버가 실제 API 서버로 요청하여 받은 응답을 전달해준다.

 

proxy 서버 프로세스

• 프록시 서버를 cors제한을 받지 않게 설정한 후에 웹 서버 실행시 같이 실핸시킨다.
• 클라이언트의 도메인과 프록시 서버의 도메인을 같게하여 실제로 요청을 프록시 서버로 보낸다.
• 프록시 서버는 클라이언트로부터 받은 요청을 실제 API 서버로 전달한다.
• 프록시 서버는 cors제한을 받지 않고 정상 응답을 받고 그 응답을 클라이언트에게 전달한다.

 

Express 서버 Proxy 설정

• proxy 노드 모듈 설치

npm install http-proxy-middleware

• Express 서버 proxy 미들웨어 설정

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

app.use('/test1', createProxyMiddleware({
  target: 'https://test1.com', // 실제 API 서버
  changeOrigin: true, // 요청을 프록시 서버가 받는 대신 원본 도메인으로 처리
  secure: false,
}));

 

Proxy를 사용하여 Cors를 우회하는 이유

• 브라우저는 cors정책을 따르지만, proxy는 cors 정책을 따르지 않는다.
• CORS는 브라우저에서 다른 도메인으로의 요청을 제한하는 보안 정책이며,
• Proxy는 서버에서 중계 역할을 하여 브라우저의 CORS 정책을 우회할 수 있게 해줍니다.

 

http-proxy-middleware 버전 비교

1 버전 (e.g. 0.17.4)

const express = require('express');
const proxyMiddleware = require('http-proxy-middleware');
const { proxyConfig } = require('./proxy.config');

const app = express();

const proxy = proxyMiddleware(proxyConfig);
app.use('/proxy', proxy);

app.listen(8002, () => {
  console.log('Server running on http://localhost:80');
});

module.exports = {
  proxyBearerConfig: {
    target: 'https://127.0.0.1:8081',
    changeOrigin: true,
    secure: false,
    pathRewrite: {
      '^/proxy*': '',
    },
    proxyReq: onProxyReq,
    proxyRes: onProxyRes,
  },
};

2버전 (e.g. 2.0.6)

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const { proxyConfig } = require('./proxy.config');

const app = express();

const proxy = createProxyMiddleware(proxyConfig);
app.use('/proxy', proxy);

app.listen(8002, () => {
  console.log('Server running on http://localhost:80');
});

module.exports = {
  proxyBearerConfig: {
    target: 'https://127.0.0.1:8081',
    changeOrigin: true,
    secure: false,
    pathRewrite: {
      '^/proxy*': '',
    },
    proxyReq: onProxyReq,
    proxyRes: onProxyRes,
  },
};

 

3버전 (3.0.0)

• middleware config 모듈 proxyReq, proxyRes 문법 변경

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const { proxyConfig } = require('./proxy.config');

const app = express();

const proxy = createProxyMiddleware(proxyConfig);
app.use('/proxy', proxy);

app.listen(8002, () => {
  console.log('Server running on http://localhost:80');
});

 

module.exports = {
  proxyBearerConfig: {
    target: 'https://127.0.0.1:8081',
    changeOrigin: true,
    secure: false,
    pathRewrite: {
      '^/proxy*': '',
    },
   on: {
      proxyReq: onProxyReq,
      proxyRes: onProxyRes,
    },
  },
};