[Web Server] 기초 : CORS

💡 Origin의 의미

---

: 먼저, CORS에서의 Origin란? 한국말로는 '출처'라고 부르는 것인데,
이는 URL, 도메인 등과 비슷해 보이지만 엄연히 의미가 다르기 때문에 확실히 알고 넘어가는 것이 좋다.

Origin은 URL에서의 프로토콜, 도메인, 포트 번호를 합친 부분을 의미한다. 예를 들어, 다음과 같은 URL이 있다고 가정해보면

URL: https://naver.com:80/posts/123456?data=789#abc

• 프로토콜(Scheme이라고도 부른다.) = https://
• 도메인 = naver.com
• 포트 번호 = :80
• Origin =https://naver.com:80

Origin : https://naver.com:80

💡 CORS 동작원리

---

: CORS의 기본적인 동작 원리는 단순하다. 브라우저는 다른 Origin으로 요청을 보낼 때 Origin 헤더에 자신의 Origin을 설정하고,
서버로부터 응답을 받으면 응답의 Allow-Control-Allow-Origin 헤더에 설정된 Origin의 목록의 요청의 Origin 헤더 값이 포함되는지 검사하는 것이다.
즉, CORS 요청을 위해서는 서버에서의 응답의 Allow-Control-Allow-Origin 헤더의 허용되는 Origin의 목록 혹을와일드카드(*)를 설정해주면 된다.

와일드카드(*)는 모든 Origin을 허용한다는 것을 의미하는 특수 기호

CORS 요청은 다음과 같이 세 가지의 유형으로 나눠 볼 수 있다.

🔸 단순 요청 (Simple Request)

---

단순 요청(Simple Request)은 공식 용어가 아닌, MDN에서 사용한 용어를 가져온 것이다.
단순 요청은 흔한 유형의 요청이 아니며, 단순 요청이 되기 위한 조건이 매우 까다롭다.

• 다음 중 하나의 메서드
  • GET
  • HEAD
  • POST

• User Agent가 자동으로 설정한 헤더를 제외하면, 아래와 같은 헤더들만 사용할 수 있다.
  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type
  • DPR
  • Dounlink(en-US)
  • Save-Data
  • Viewport-Width
  • Width
• Content-Type 헤더에는 아래와 같은 값들만 설정 할 수 있다.
  • application/x-www-form-urlencode
  • multipart/from-data
  • text/plain
• . . .

위와 같은 조건을 만족하는 단순 요청은 안전한 요청으로 취급되어, 프리플라이트 요청이 필요 없이 단 한 번의 요청만을 전송한다.
즉, 위에서 언급한 CORS의 기본적인 동작 원리를 그래도 따른다. 다른 Origin으로 요청을 보낼 때 Origin 헤더에 자신의 Origin을
설정하고, 서버로부터 응답을 받으면 응답의 Allow-Control-Allow-Origin 헤더에 설정된 Origin의 목록에 요청의 Origin 헤더
값이 포함되는지 검사하는 것이다.

[그림] 단순 요청

🔸 프리플라이트 요청 (Prefilght Request)

---

: 서버에 실제 요청을 보내기 전에 예비 요청에 해당하는 프리플라이트 요청 (Prefilght Request)을 먼저 보내서 실제 요청이
전송하기에 안전한지 확인한다. 만약 안전한 요청이라고 확인이 되면, 그때서야 실제 요청을 서버에게 보낸다.

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

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

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

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

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

[그림] 프리플라이트 요청 (Prefilght Request)