프론트엔드/WebServer

cors

테오구 2021. 10. 22. 10:11
728x90

예전에는 서버에서 직접 클라이언트를 가지고 있고 유저가 서버에 요청하면 서버에 있던 클라이언트를 유저가 받아가서 그 클라이언트에서 통신을 하거나 데이터를 보는 방식을 사용했습니다.

 

하지만 최근에는 singlepage application이 등장하고 앱들이 고도화 되어 youtubeapi를 이용한다던지 하였기 때문에 입니다.

이러한 요청을 Cross Origin이라고 하고 CORS(Cross Origin Resource Sharing): Cross origin에서 리소스를 요청하여 사용합니다.(ex 유튜브에서 girhub으로)

mdn에서는 보안상의 이유로 cross origin 요청을 제한하고 있습니다. 왜냐하면 어떠한 요청을 할지 모르기 때문

 

options

요약: 서버에서 allow하는 조건들을 다 갖추고 있는가? 사전에 섭에 확인하는 요청

 

기능적 개요

교차 출처 리소스 공유 표준은 웹 브라우저에서 해당 정보를 읽는 것이 허용된 출처를 서버에서 설명할 수 있는 새로운 HTTP 헤더를 추가함으로써 동작합니다.

 

추가적으로, 서버 데이터에 부수 효과(side effect = useEffect)를 일으킬 수 있는 HTTP 요청 메서드(GET을 제외한 HTTP 메서드)에 대해, CORS 명세는 브라우저가 요청을 OPTIONS 메서드로 "프리플라이트"(preflight, 사전 전달)하여 지원하는 메서드를 요청하고, 서버의 "허가"가 떨어지면 실제 요청을 보내도록 요구하고 있습니다.

 

HTTP 헤더 - HTTP | MDN

HTTP 헤더는 클라이언트와 서버가 요청 또는 응답으로 부가적인 정보를 전송할 수 있도록 해줍니다. HTTP 헤더는 대소문자를 구분하지 않는 이름과 콜론 ':' 다음에 오는 값(줄 바꿈 없이)으로 이루

developer.mozilla.org

https://nodejs.org/ko/docs/guides/anatomy-of-an-http-transaction/

 

 

HTTP 트랜잭션 해부 | Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

 

 

HTTP 트랜잭션 해부 | Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

 

 

728x90