10.17 ~ 10.23 WIL

CORS 란?

 

CORS 는 Cross -Origin Resource Sharing의 약자로 교차 출처 리소스 공유라고 합니다.

 

브라우저가 로드를 허용해야하는 자체가 아닌 다른 출처를 서버가 나타낼 수 있도록 하는 HTTP 헤더 기반 메커니즘이고, 서버가 실제 요청을 허용하는지 확인하기 위해 브라우저가 교차 출처 리소스를 호스팅하는 서버에 "프리플라이트" 요청을 하는 메커니즘에 의존합니다.

 

* 프리플라이트 : CORS 실행 전의 요청으로 CORS 프로토콜이 이해되고 서버가 특정 메서드와 헤더를 사용하여 인식하는 확인하는 CORS 요청입니다. 프리플라이트는 자동으로 실행되며 일반적인 경우 프론트 엔드 개발자는 이러한 요청을 직접 작성할 필요가 없습니다. request가 "to preflighted"로 규정되고 간단한 요청에 대한 생략 될 때 나타납니다.

 

https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request

Preflight request - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

 

보안상의 이유로 브라우저는 스크립트에서 시작된 교차 출처 HTTP 요청을 제한합니다. 예를 들어 XMLHttpRequest Fetch API는 동일 출처 정책을 따릅니다.

 

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Cross-Origin Resource Sharing (CORS) - HTTP | MDN

그리고 HTTP 요청에 대해서 어떤 요청을 하냐에 따라서 origin 정책이 달라집니다.

 

HTML -> Cross - Origin

 

XMLHttpRequest, Fetch API -> Same - Origin

 

출처(Origin)

 

-> Protocol 과 Host, Port를 모두 합친 것을 의미 ex ) HTTPS://www.name.com:3000

-> HTTPS : Protocol

-> www.name.com: HOST

-> 300- : Port

 

-> Same Origin : 같은 출처에서만 리소스를 공유가능

-> Cross Origin : 이건 지금 설명 중인 CORS를 의미

 

참조

 

https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F#thankYou

[WEB] 📚 CORS 개념 💯 완벽 정리 & 해결 방법 👏