CORS의 사전적 의미
CORS(Cross-Origin Resource Sharing)를 단어 그대로 번역하면 교차 출처 자원 공유라고 해석될 수 있다. 여기서 교차 즉, 서로 다른 출처를 의미하며 풀어서 해석하면 출처가 다른 자원들을 공유한다라는 의미다.
출처란?
웹사이트의 url은 아래 이미지처럼 프로토콜, 호스트, 포트, 패스, 쿼리스트링, 프레그먼트로 구성되어 있다. 출처가 같은 웹사이트라는 의미는 프로토콜, 호스트, 포트가 같을때를 의미한다.
동일 출처: Protocol + Host + Port 3가지가 같을때
그래서 CORS란 무엇인가
CORS는 다른 출처를 가진 리소스를 가져올 수 있도록 허용하는 메커니즘을 말한다.
*메커니즘: 사물의 작용 원리나 구조 (동의어: 체제)
CORS가 필요한 이유, SOP 정책
SOP(Same-Origin Policy)란 동일한 출처에서만 리소스를 공유할 수 있는 정책을 말한다. 웹브라우저는 동일 출처(Same-Origin) 서버에 있는 리소스는 자유로이 가져올수 있지만 다른 출처(Cross-Origin) 서버에 있는 리소스는 가져오지 못한다. 웹브라우저가 이러한 SOP 정책을 바탕으로 작동하기 때문에 다른 출처에서 리소스를 받아올때 CORS 메커니즘이 필요하게 된다. 요약하자면 SOP 정책을 따르고 싶지 않다면 CORS메커니즘을 사용한다. (CORS는 SOP의 해결법)
결론
클라이언트가 서버에 데이터를 요청하고 해당 리소스를 받아올때 서로 다른 출처를 가졌다면 브라우저가 이를 차단해 해당 리소스를 받아올 수 없다. 하지만 다른 출처에서 리소스를 받아와야하는 경우도 발생한다. 이때 CORS를 사용해 다른 출처를 서버에 등록해준다.
CORS 사용법
추가 HTTP 헤더를 사용해 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여한다.
CORS 에러메세지 해결법
- Chrome 확장 프로그램 이용
- 서버에서 Access-Control-Allow-Origin 헤더 세팅하기
📘 참고
'웹개발 · IT 지식' 카테고리의 다른 글
| [웹개발] 드림코딩 노트정리: CI/CD (0) | 2022.11.27 |
|---|---|
| [웹개발] 프론트앤드에서 성능 최적화란? (0) | 2022.11.25 |
| [한줄정리/웹개발] 자바스크립트에서 스코프(Scope)란? (0) | 2022.11.22 |
| [웹개발] 자바스크립트 프레임워크 React와 Vue의 장점과 비교 (0) | 2022.11.22 |
| [웹개발] 번들러와 웹팩 (0) | 2022.11.22 |
댓글