proxy server와 CORS 해결방식

프록시 패턴

대상 객체에 접근 하기 전 그접근에 대한 흐름을 가로채 해당 접근을 필터링 하거나 수정하는 등의 역할을 하는
계층이 있는 디자인 패턴

→ 검증, 캐싱, 로깅에 사용

 

Forward Proxy

포워드 프록시(Forward Proxy)는 클라이언트와 서버 사이에 위치하여 클라이언트의 요청을 대신 처리하는 서버입니다.

클라이언트는 직접 서버에 접근하지 않고, 포워드 프록시를 통해 서버에 요청을 전달하고 응답을 받습니다.

 

기능

1. 익명성 제공: 클라이언트의 IP 주소를 숨길 수 있습니다.
2. 캐싱: 자주 요청되는 데이터를 캐싱하여 응답 속도를 향상시킵니다.
3. 액세스 제어: 특정 웹사이트나 서비스를 차단할 수 있습니다.
4. 보안: 악성 웹사이트로부터 클라이언트를 보호할 수 있습니다.

작동 방식

1. 클라이언트가 포워드 프록시 서버에 요청을 보냅니다.
2. 포워드 프록시 서버는 요청을 수신하고, 대상 서버에 전달합니다.
3. 대상 서버는 요청을 처리하고, 응답을 포워드 프록시 서버에 보냅니다.
4. 포워드 프록시 서버는 응답을 클라이언트에게 전달합니다.

Reverse Proxy

리버스 프록시(Reverse Proxy)는 서버와 클라이언트 사이에 위치하여 서버의 요청을 대신 처리하는 서버입니다.

클라이언트는 리버스 프록시를 서버처럼 인식하며, 리버스 프록시는 백엔드 서버로 요청을 전달하고

응답을 클라이언트에게 반환합니다.

 

기능

1. 로드 밸런싱: 여러 백엔드 서버에 요청을 분배하여 부하를 분산시킵니다.
2. 보안: 백엔드 서버를 외부에 노출시키지 않음으로써 보안을 강화할 수 있습니다.
3. SSL 종료: SSL/TLS 암호화를 리버스 프록시에서 처리하여 백엔드 서버의 부담을 줄입니다.
4. 캐싱: 응답 데이터를 캐싱하여 성능을 향상시킵니다.
5. 콘텐츠 압축: 응답 데이터를 압축하여 전송 속도를 향상시킵니다.

 

 

작동 방식

1. 클라이언트가 리버스 프록시 서버에 요청을 보냅니다.
2. 리버스 프록시 서버는 요청을 수신하고, 적절한 백엔드 서버에 전달합니다.
3. 백엔드 서버는 요청을 처리하고, 응답을 리버스 프록시 서버에 보냅니다.
4. 리버스 프록시 서버는 응답을 클라이언트에게 전달합니다.

 

CORS

서버가 웹 브라우저에서 리소스를 로드할 때 다른 오리진을 통해 로드하지 못하게 하는 HTTP 헤더 기반 메커니즘

CORS가 허용되지 않는 경우:

1. 클라이언트 요청:
   • 클라이언트(예: https://foo.com)에서 cute cat pic을 요청
   • GET 요청을 보냅니다: GET /cutecat.png, Origin: foo.com.
2. 브라우저 처리:
   • 브라우저는 이 요청을 https://bar.com 서버로 전달
3. 서버 응답:
   • 서버(https://bar.com)는 CORS 정책에 따라 요청을 차단
4. 결과:
   • 브라우저는 클라이언트에 접근이 차단되었음을 알림
   • 오류 메시지: Access to fetch at 'https://bar.com/' from origin 'https://foo.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
     
     

프록시 서버에서 CORS 헤더 설정

프록시 서버는 클라이언트와 서버 사이에 위치하여 요청과 응답을 중계하는 서버입니다.

포워드 프록시(클라이언트 측)와 리버스 프록시(서버 측) 모두 CORS 헤더를 추가하여 클라이언트가 다른 출처의 리소스에 접근할 수 있도록 할 수 있습니다.

 

 

CORS가 허용된 경우

클라이언트 요청

• 클라이언트(예: https://foo.com)에서 동일한 요청을 보냅니다.
• GET 요청: GET /cutecat.png, Origin: foo.com.

1. 브라우저 처리
   • 브라우저는 이 요청을 https://bar.com 서버로 전달하려고 합니다.
2. 서버 응답
   • 서버(https://bar.com)는 CORS 정책에 따라 요청을 허용합니다.
   • 응답 메시지: HTTP/1.1 200 OK, Access-Control-Allow-Origin: foo.com
3. 결과
   • 브라우저는 서버의 응답을 클라이언트에 전달합니다.
   • 요청이 성공적으로 처리되어 클라이언트는 리소스에 접근할 수 있습니다.