프록시 패턴과 프록시 서버

프록시 패턴

 

대상 객체(Subject)에 접근하기 전 접근에 대한 흐름을 가로채 대상 객체 앞단의 인터페이스 역할을 하는 디자인 패턴

 

 

 

• Subject : Proxy와 RealSubject를 하나로 묶는 인터페이스(다형성)
  • 대상 객체와 프록시 역할을 동일하게 하는 추상 메서드 action() 정의
• RealSubject : 원본 대상 객체
• Proxy : 대상 객체(RealSubject)를 중계할 대리자 역할
  • 프록시는 대상 객체를 합성(Composition)한다.
  • 프록시는 대상 객체와 같은 이름의 메서드를 호출하며, 별도의 로직을 수행할 수 있다. (인터페이스 구현 메서드)
  • 프록시는 흐름제어만 할 뿐 결과값을 조작하거나 변경시키면 안된다.
• Client : Subject 인터페이스를 이용하여 프록시 객체를 생성해 이용
  • 클라이언트는 프록시를 중간데 두고 프록시를 통해서 RealSubject와 데이터를 주고 받는다.

 

 

 

 

프록시 서버

 

서버와 클라이언트 사이에서 클라이언트가 자신을 통해 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해주는 것

 

프록시 서버를 활용한 것

• Nginx
• CloudFlare
• 프론트에서의 proxy
  • keyword: CORS

 

1. Vue

 

// vue.config.js

module.exports = {
    devServer: {
    	overlay: false,
    proxy: {
        '/api': {
            target: 'http://localhost:3000/api',
                changeOrigin: true,
                pathRewrite: {
                	'^/api': ''
                }
            }
        }
    },
}

 

2. React

 

// package.json

{	.
	.
	"proxy": "http://localhost:3000"
    .
    .
}

 

프론트 URL: http://localhost:8080

서버 URL : http://localhost:3000/api

 

• 프론트에서 서버 호출
  • http://localhost:3000/api/~~ 요청
  • Proxy Server 거쳐서
  • http://localhost:3000/api -> http://localhost:8080/api 우회에서 접근하도록 경로를 변경
  • 우회해서 접근하기 때문에 브라우저 Origin이 일치하여 CORS 에러가 발생하지 않음