Proxy
하루에 블로깅 시간은 1시간 내외가 적당한거같다. 다끝나가는 시점에서 깨달은건 마음이 아프지만 추후에 좋은 기회가 와서 계속 개발을 할수있다면, 그정도로 그치는걸로 ㅜㅜ
1. CORS 정책 필요 이유
- CORS: Corss-Origin Resource Sharing, 교차 출처 리소스 공유, 추가 HTTP 헤더를 사용해 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하는것을 브라우저에게 알리는 체계
- Origin: 출처는 접근 시 사용하는 URL의 프로토콜, 도메인, 포트로 정의된다. 두 객체가 모두 일치해야 같은 출처를 가진다. 일부 작업은 동일 출처 콘텐츠로 제한되지만, CORS를 통해 제한을 해제할수있다.
- Live Data: 실제 서비스되는 앱의 DB에 적재되는 데이터
클라이언트 측에서 요청을 보낼 시 서버측은 해당 도메인에만 권한을 부여하여 유저의 민감한 정보를 보호할 수 있다.
1.1 Proxy
React 라이브러리, Webpack Dev Server에서 제공하는 proxy기능을 사용 시 CORS정책을 우회가능하다. 별도의 응답 헤더를 받을 필요없이 브라우저는 React앱으로 데이터를 요청, 해당 요청을 백엔드로 전달한다. React앱이 서버로부터 받은 응답 데이터를 다시 브라우저로 전달한다. 브라우저는 CORS정책을 위반한지 모른다. proxy로 우회한다.
B: 브라우저 FE: 프론트엔드 BE: 백엔드 P: 프록시
B -> 요청 -> F, B -> 접근권한 확인 -> BE -> 응답 -> B -> 응답 파기 여부 결정 -> FE
proxy적용전 흐름
B -> 요청 -> P를 통한 우회 요청 -> BE -> P를 통한 우회 응답 -> FE -> 받은 응답 B 전달 -> B
Proxy를 사용하면 CORS ERROR가 발생하지 않도록 우회할 수 있다.
2. usage
2.1. webpack dev server proxy
브라우저 API 요청 시 백엔드 서버에 직접 요청이 아닌, 현재 개발 서버의 주소로 우회 요청을 한다. 웹팩 개발 서버에서 해당 요청을 받아 그대로 백엔드 서버로 전달하고, 백엔드 서버에서 응답한 내용을 다시 브라우저 쪽으로 반환한다.
웹팩 개발서버의 proxy 설정은 웹팩 설정을 통해서 적용을 하나, CRA를 통해 만든 리액트 프로젝트에서는 package.json에서 proxy값을 설정하여 쉽게 적용할 수 있다.
...
"browserslist": {
"production": [
">x.x%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
...
]
},
"proxy": "우회 API주소"
}
export async function getAllfetch() {
const response = await fetch("우회할 API 주소/params")
.thn(() =>? {
...
})
}
// 요청시 도메인 부분 제거
export async function getAllfetch() {
const response = await fetch("/params")
.thn(() =>? {
...
})
}
2.2. React Proxy usage
webpack dev server에서 제공하는 proxy는 전역적 설정이기 때문에, 해당 방법이 충분히 적용되지 않는 경우가 생기기도 한다. 이때는 수동으로 proxy를 적용해줘야하는 경우가 있다. http-proxy-middleware를 사용해본다.
npm install http-proxy-middleware --save
// project/src/setupProxy.js 생성
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = app => {
app.use(
'/api', //proxy 필요 path parameter입력
createProxyMiddleware({
target: 'http://localhost:${너의포트}',
changeOrigin: true,
})
)
}
// webpack dev server proxy와 동일하게 우회할 api주소 삭제
3. 정보통신기술용어에서의 Proxy
Proxy 프록시 프락시
3.1. 정의
다른 사람을 대신/대리하여 무언인가 하는것(중개), 1이상의 네트워크 인터페이스를 갖고, 응용계층에서 특정 유형으로 요청된 연결을 다른 연결로 중계하는 역할을 수행한다.
3.2. 위치
클라이언트측과 서버측 간 둘 중 하나에서, 내부 사설명과 외부 인터넷망이 접하는 경계에 위치한다.
- 포워드형 프록시: 주로 데이터 수신용, 사용자 가까운 쪽에 위치(회신료 비쌋던 초창기사용)
- 리버스형 프록시: 데이터 제공용, 서버 가까이 위치(오늘날 2022-4-17???)
3.3. gateway와 비교
proxy | gateway |
---|---|
동일 프로토콜로 연결 | 서로다른 프로토콜 간을 변환시켜주며 연결 |
통신 내용 이해할 필요 있음 | 통신 내용을 그대로 전달 |
필요에 따라 내용 수정도 가능 | 내용 수정 불가 |
서버 대신 응답 가능 | 클라이언트가 중간에 게이트웨이 존재 여부를 전혀 의식 못하게 함 |
3.4. proxy 역할
- 중계 기능: 사용자 대신/대리하여 서버에 접근
- 캐시 기능: 자주 요구된 정보에 대한 일시적 저장, 빠른 응답, 병목 트래픽 및 대역폭 감소
- 보안 기능: 네트웨크 외부에서 실제 사용자, 서버의 위치를 감추는 등 효과 가능(IP주소 익명성 가능)
- 방화벽으로 활용 기능: 잘설정된 proxy는 효율을 올리고, 좋은 firewall이 된다. 방화벽의 호스트에서 실행되는 전문화된 앱또는 서버 프로그램으로 방화벽의 베스천 호스트에 설치되어 운용된다.
- IP 주소의 절약 기능: 통상 프록시 서버는 외부 네트워크에 접속되는 유일한 장비이다. 서버에서만 유일한 공인 IP가 필요하다.
- 부적절한 사이트에의 접근 방지 등
3.5. 형태
- 공유 프록시 및 개인 프록시
- 개인 프록시: 클라이언트 컴퓨터 내에서 직접 실행되는 개인 전용 프록시 형태이다.
- 웹브라우저 내장기능: 대부분의 웹브라우저들이 프록시를 자동/수동으로 설정 가능하다.
- 웹프록시 툴: 웹브라우저와 함께 동작하는 툴
- 공유 프록시: 여러 클라이언트들 또는 서버들을 대신하는 중앙 집중형
- 개인 프록시: 클라이언트 컴퓨터 내에서 직접 실행되는 개인 전용 프록시 형태이다.
- 공유 프록시 서버 형태: 프록시 서버
- 네트워크적인 관점에서 다수를 대신하여 일을 할 수 있는 서버
- 예: HTTP Proxy Server(Web Cache), VoIP 프록시 서버
- 프록시 서버의 웹 응용
- Web Proxy Server, HTTP Proxy Server, Web cache
- 원천 웹서버(origin web server)를 대신해 HTTP 요청을 처리하는 저장가능 서버
- 이중적 역할
- 클라이언트와 상호작용할 때 서버처럼 동작
- 원천 웹서버와 상호작용할때 클라이언트처럼 동작
3.6. 프록시에 보안 채널 형성
SOCKS(Socket Secure, “SOCKetS”)
광의적 개념의 proxy는 중개나 인터셉터의 개념이 큰거같다. mdn에도 proxy객체가 따로 있어 객체의 기본작업을 가로채고 재정의하는 형태로 사용되는것을 본다면 광의적 개념에서의 동작이 다른 부분들에서도 비슷하게 동작하게 구현되있을거같다. from이 어디인지를 정확하게 알아야 의미하는 proxy의 동작을 유추해볼 수 있을거같음.
(뭔말인지 나도 모르것어요)
참조
webpack-guide: webpack-dev-server
react.vlpt.us: cors-and-proxy
webpack.kr: conf/dev-server
npmjs: http-proxy-middleware
ktword: 프록시
mdn: js/ref/go/proxy