what CORS is

브라우저에서는 보안을 이유로 cross-origin HTTP 요청을 제한한다. 그래서 HTTP- HTTPS 사이에서 cross-origin 요청을 하려면 서버의 동의가 필요하다.
만약 서버가 동의한다면 브라우저에서는 요청을 허락하고,
동의하지 않는다면 브라우저에서 거절합니다.
이 매커니즘을 CORS 라고 부른다.

---

CORS 동작 원리

다른 출처의 리소스를 요청할 때 HTTP 프로토콜을 사용하여 요청을 보내게 되는데, 이때 브라우저는 요청헤더에 Origin이라는 필드에 요청을 보내는 출처를 함께 담아서 보낸다.

하지만 동작 원리를 조금 더 깊게 들어가면 CORS 요청은 다음과 같이
세 가지 유형으로 나눠서 생각해볼 수 있다.

Simple Request
MDN에서 "단순요청"은 아래와 같이 정의한다.

단순요청은 예비 요청(Prefilght)을 보내지 않고 바로 서버에 본 요청을 한 후, 서버가 이에 대한 응답의 헤더에 Access-Control-Allow-Origin과 같은 같을 보내주면 브라우저가 CORS정책 위반여부를 검사하는 방식이다.

단순요청은 아래의 조건을 만족해야 된다.

• 요청의 메소드는 GET, HEAD, POST 중 하나여야 한다.

• 유저 에이전트가 자동으로 설정한 헤더외에,
  수동으로 설정할 수 있는 헤더는 Fetch 명세에서
  "CORS-safelisted request-header"로 정의한 헤더만 사용할 수 있다.

위와 같은 조건을 만족하는 단순 요청은 안전한 요청으로 취급되며, 프리플라이트 요청이 필요 없이 단 한 번의 요청만을 전송한다.

Prefilght Request

프리플라이트 요청의 특징은 다음과 같다.

• 메소드로 OPTIONS를 사용한다.
• Origin 헤더에 자신의 Origin을 설정한다.
• Access-Control-Request-Method 헤더에
  실제 요청에 사용할 메소드를 설정한다.
• Access-Control-Request-Headers 헤더에
  실제 요청에 사용할 헤더들을 설정한다.

서버는 이러한 프리플라이트 요청에 대해 다음과 같은 특징을 가진 응답을 제공해야 한다.

• Access-Control-Allow-Origin 헤더에 허용되는 Origin들의 목록 혹은 와일드카드(*)를 설정한다.
• Access-Control-Allow-Methods 헤더에 허용되는 메소드들의 목록 혹은 와일드카드(*)를 설정한다.
• Access-Control-Allow-Headers 헤더에 허용되는 헤더들의 목록 혹은 와일드카드(*)를 설정한다.
• Access-Control-Max-Age 헤더에 해당 프리플라이트 요청이 브라우저에 캐시 될 수 있는 시간을 초 단위로 설정한다.

이러한 응답을 받고 나면 브라우저는 이 응답의 정보를 자신이 전송한 요청의 정보와 비교하여 실제 요청의 안전성을 검사한다.
만약 이 안전성 검사에 통과하게 된다면, 그때서야 실제 요청을 서버에게 보낸다.

---