본문 바로가기
엘리스 AI 트랙 4기/elice AI track

[8주차] CORS

by _sweep 2022. 3. 9.

3월 9일 자 학습 내용 정리입니다.

 

 

✅ CORS

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 어떠한 출처(origin)에서 실행 중인 웹 애플리케이션이 다른 출처의 자원에 접근할 수 있는 권한을 부여할 수 있도록 추가 HTTP 헤더를 이용해 브라우저에 알려주는 체제이다.

 

브라우저는 모든 요청 시 Origin 헤더를 포함하게 되는데 서버는 Origin 헤더를 보고 해당 요청이 원하는 도메인에서 출발한 것인지를 판단한다.

그리고 보안 상의 이유로 다른 Origin에서 온 요청은 거부하도록 되어있다.

 

예를 들어 XMLHTTPRequest와 Fetch API는 동일 출처 정책(same-origin policy)을 따른다.

즉, 이 API를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만을 불러올 수 있다.

 

그러나 보통 서버의 endpoint와 홈페이지의 도메인은 동일하지 않다.

따라서 서버에서는 홈페이지의 도메인을 허용하여 endpoint와 도메인이 동일하지 않더라도 요청을 보낼 수 있게 한다.

이때 서버는 Access-Control-Allow-Origin 외에 Access-Control-*을 포함하는 CORS 관련 정보를 헤더에 담아 클라이언트에 보낸다.

 

출처 : https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

 

정리하자면 CORS 체제는 브라우저와 서버 같의 안전한 교차 출처 요청 및 데이터 전송을 지원한다.

이로 인해 웹 사이트에 악성 스크립트가 로드되어 수상한 요청을 보내거나 익명 유저로부터의 DDos 공격 등을 막을 수 있다.

 

서버에 직접 CORS 설정을 할 수 없다면 Proxy 서버 등을 만들어 해결할 수 있다.

 

 

✅ Proxy Server

프록시 서버(Proxy Server)는 인터넷 상의 여러 네트워크들에 접속할 때 중계 역할을 해주는 프로그램 또는 컴퓨터를 의미한다.

프록시는 요청을 가로챈 뒤 응답을 돌려준다.

이때 가로챈 요청을 전달, 수정할 수 있다.

 

출처 : https://itwiki.kr/w/%ED%94%84%EB%A1%9D%EC%8B%9C_%EC%84%9C%EB%B2%84

 

프록시 서버를 CORS 이슈를 해결하기 위해 사용할 수 있다.

프록시 서버를 클라이언트와 서버 사이에 두어 요청과 응답을 전달할 때 프록시 서버를 통해 전달하도록 하는 것이다.

 

🔍 참조

CORS https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

Proxy Server https://ko.wikipedia.org/wiki/%ED%94%84%EB%A1%9D%EC%8B%9C_%EC%84%9C%EB%B2%84

 

'엘리스 AI 트랙 4기 > elice AI track' 카테고리의 다른 글

[8주차] 상태 관리에 사용되는 Hook  (0) 2022.03.11
[8주차] 상태 관리와 Flux Pattern  (0) 2022.03.11
[7주차] react-router v6  (0) 2022.03.05
[7주차] React 생명주기  (0) 2022.03.04
[7주차] Hooks  (0) 2022.03.04

댓글