[cs지식] CORS란? (SOP, Simple Request,Preflight Request)

웹 브라우저는 기본 보안 모델로
서로 다른 오리진 간의 리소스 접근을 제한하는 메커니즘인 SOP(Same Origin Policy : 동일 출처 정책)를 사용함!

그런데 만약 다른 오리진과 통신하기 위해서는 SOP보다 완화된 메커니즘이 필요하다.

이게 바로 CORS (Cross Origin Resource Sharing) 이다. 
CORS는 웹 브라우저는 보안상의 이유로 다른 출처에서의 리소스 요청을 제한하는 것이 기본적인데
이러한 제한을 완화해 특정 조건 하에서 서로 다른 출처 간의 리소스 요청을 허용하는 것이 CORS이다.
한마디로 웹 브라우저가 서로 다른 오리진* 을 가진 리소스*간의 요청을 제어하는 메커니즘 이다.

 

오리진 (origin) : protocol과 hostname과 port

오리진 (Origin)

 

리소스 (resource)  : 이미지, 비디오, CSS 등

 

클라이언트가 서버에 보내는 요청은 보통 두 가지 유형인데

1. 간단한 요청 (Simple Request)

- 요청 메서드가 GET, HEAD, POST 중 하나.
- 사용되는 헤더는 Accept, Accept-Language, Content-Language,
Content-Type (단, Content-Type은 application/x-www-form-urlencoded, multipart/form-data, text/plain 중 하나)이고
- 커스텀 헤더는 사용되지 않음.
- 요청에 ReadableStream을 사용하지 않음.



2. 프리플라이트 요청 (Preflight Request)

아래 조건 중 하나라도 만족할 때 발생.
- 요청 메서드가 GET, HEAD, POST 외의 다른 메서드 (예: PUT, DELETE).
Content-Type 헤더가 application/json, application/xml, text/plain 등과 같이 CORS가 정의한 허용되지 않는 값일 때.
- 커스텀 헤더가 요청에 포함되어 있을 때.
- ReadableStream을 사용하는 경우.

간단한 요청 (Simple Request)일 때만 브라우저가 바로 서버로 보내며, CORS 프로세스를 진행한다. 
서버는 해당 요청에 대한 CORS 관련 헤더를 포함하여 응답하게 된다!