CORS (Cross-Origin Resource Sharing)
웹 애플리케이션에서 발생하는 보안 메커니즘 중 하나
다른 출처(origin)에서 실행 중인 웹 페이지가 현재 출처와 다른 출처의 리소스에 접근할 수 있도록 허용하는 방법을 정의
기본적으로 웹 브라우저는 동일 출처 정책(Same-Origin Policy)을 적용하여,
스크립트가 다른 출처의 리소스에 접근하는 것을 제한함
이는 보안상의 이유로, 예를 들어 XSS(Cross-Site Scripting) 공격을 방지하기 위함이다
CORS 동작 원리
CORS는 추가 HTTP 헤더를 사용하여, 한 출처에서 다른 출처로의 요청이 안전한지를 브라우저에 알려준다
서버는 Access-Control-Allow-Origin 과 같은 CORS 관련 헤더를 응답에 포함시켜,
해당 리소스에 대한 접근을 허용할 출처를 명시할 수 있다
브라우저는 이 헤더를 검사하여 요청을 보낸 웹 페이지의 출처가 허용 목록에 있는지 판단하고,
그에 따라 리소스 접근을 허용하거나 차단한다
개발 중 CORS ?
보안을 해치지 않으면서 리소스에 대한 접근을 적절히 허용한다
- 백엔드에서 CORS 허용
- 일반적으로 백엔드 서버에서 Access-Control-Allow-Origin 헤더를 적절히 설정하여 특정 출처(또는 모든 출처)의 프론트엔드 애플리케이션이 리소스에 접근할 수 있도록 허용
- 프록시 서버 사용
- 프론트엔드 개발 서버에서 프록시 설정을 사용하여 API 요청을 중계할 수 있다 (보안상 문제로 개발 단계에서만)
'Frontend' 카테고리의 다른 글
로그인 처리 시 쿠키와 세션 어떻게 사용하는가 (0) | 2024.03.06 |
---|---|
쿠키, 세션, 웹 스토리지 차이 (0) | 2024.03.06 |
Webpack, Babel, Polyfill (0) | 2024.03.06 |
DNS (0) | 2024.03.06 |
브라우저에 www.google.com 입력 시 일어나는 일 (0) | 2024.03.06 |