CORS란?
CORS는 Cross-Origin Resource Sharing(교차 출처 리소스 공유)는 브라우저가 자신의 출처가 아닌 다른 출처(도메인 혹은 포트)로부터 자원을 로딩하는 것을 허용하도록 서버가 호가해주는 HTTP 헤더 기반 메커니즘이다.
보안상의 이유로 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한한다. fetch()와 XMLHttpRequest는 동일 출처 정책(SOP)을 따른다.
CORS 메커니즘은 브라우저와 서버 간의 안전한 교차 출처 요청 및 데이터 전송을 지원한다.
브라우저는 교차 출처 HTTP 요청의 위험을 완화하기 위해 fetch()나 XMLHttpRequest 같은 API에서 CORS를 사용한다.
사전 요청 (Preflight requests)
실제 요청을 보내기 전, 해당 요청이 안전한지 판단하기 위해 브라우저가 먼저 OPTIONS 메서드를 사용해 다른 출처의 리소스에 HTTP 요청을 보낸다. 이러한 교차 출처 요청은 사용자 데이터에 영향을 미칠 수 있기 때문에 사전에 전송된다.
Preflight request는 HTTP 메소드 중 OPTIONS 메소드가 사용된다.
fetch API를 이용해 브라우저에게 리소스 요청- 브라우저는 서버에게 사전 요청을 먼저 보냄
- 사전 요청에 대한 응답으로 어떤 것을 허용하고 금지하는지 응답 헤더에 담아서 브라우저에 전달
- 브라우저는 자신이 보낸 사전 요청과 서버가 응답한 허용 정책을 비교한 후, 안전하다고 판단되면 같은 엔드포인트로 본 요청을 전송
단순 요청 (Simple requests)
CORS 사전 요청을 트리거하지 않는 방식이다. 이러한 요청은 사전 요청 없이 본 요청만으로 CORS 정책 위반 여부를 검사하기도 한다.
Simple requests는 사전 요청 없이 바로 서버에게 본 요청을 보낸 후, 서버가 이에 대한 응답 헤더에 Access-Control-Allow-Origin과 같은 값을 보내주면 그때 브라우저가 CORS 정책 위반 여부를 검사하는 방식이다.
(Preflight requests와 Simple requests의 차이점은 사전 요청의 유무이고, 전반적인 로직은 같다)
단순 요청의 조건은 3가지가 존재한다.
1. 요청 메소드는 GET, HEAD, POST 중 하나여야 한다.
2. Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, Width 를 제외한 헤더를 사용하면 안된다
3. Content-Type은 application/x-www-form-urlencoded, multipart/form-data, text/plain 만 허용된다 (application/json은 preflight 발생)
