본문 바로가기

💻 개발자/🚀 HTTP, 네트워크

[네트워크] CORS(교차 출처 리소스 공유)

반응형

그동안 잘 이해가 되지 않던 CORS(Cross-Origin Resource Sharing)에 대해 (내가 이해한 것 까지) 포스팅을 해보고자 한다.

CORS mdn 영어 원문을 보고 참조하였으나 오역이나 의역이 있을 수 있다.

 

CORS(교차 출처 리소스 공유)는 브라우저가 리소스 접근을 허용해야 하는 출처(same origin)가 아닌 다른 출처(도메인, 프로토콜, 포트 등이 다른)를 서버가 나타낼 수 있도록 하는 HTTP-header 기반 메커니즘이다. 또한 CORS는 서버가 실제 요청을 허용하는지 확인하기 위해 브라우저가 교차 출처 리소스(cross-origin resource)를 호스팅 하는 서버에 "preflight" 요청을 하는 메커니즘에 의존한다. 해당 preflight에서 브라우저는 실제 요청에 사용될 HTTP method와 headers를 나타내는 headers을 보낸다.

 

Request Headers에서 Access-Control-Request-Method가 POST임을 알 수 있다. 위에서 말했던 preflight 요청 헤더에는 실제 요청의 method가 있음이 증명되었다!!

 

보안상의 이유로, 브라우저는 스크립트로부터 cross-orgin HTTP requests를 제한한다. 예를 들어, XMLHttpRequest와 Fetch API는 same-origin 정책을 따른다. 이것은 다른 origin의 응답에 바른 CORS headers가 포함되어 있지 않으면 해당 APIs를 사용하는 웹 애플리케이션은 애플리케이션이 불려진 same origin의 리소스만 요청할 수 있다는 의미이다.

 

출처: mdn

CORS mechanism은 브라우저와 서버 간의 안전한 cross-origin 요청과 안전한 데이터 전송을 지원한다. 최신 브라우저는 XMLHttpRequest 또는 Fetch와 같은 APIs 중에서 cross-origin HTTP 요청의 위험을 완화시키기 위해 CORS를 사용한다.

 

더 깊은 내용은 아직 확실히 이해가 되지 않는다. 오늘은 내가 이해한 것까지 포스팅을 하고 다음에 내 지식이 더 넓어졌을 때 조금 더 와닿는 포스팅을 해봐야겠다.

반응형