CORS란? (feat.preflight )

[ CORS ] - Cross Origin Resource Sharing
https://www.youtube.com/watch?v=bW31xiNB8Nc 내용 6분 30초까지 정리
https://www.youtube.com/watch?v=-2TgkKYmJt4 내용 12분까지 정리

한 사이트에서 주소가 다른 서버로 요청을 보낼 때 발생하는 문제.

상황에 따라 http 요청을 보낼 때 정상 작동하는 곳이 있기도 한데, 정상 작동하지 않는 곳도 있다. 어디에서 보내는 요청이 막히는 것인지 알아야 한다.

웹사이트에서 ajax 요청을 보낼 때마다 작동이 안되는데, 웹사이트를 여는 곳 즉, 크롬, 엣지, 사파리 같은 브라우저에서 일어나는 문제이다. 다시 말해 프론트엔드에서 일어나는 문제.
브라우저에서 내가 작업하는 곳에 요청을 보내지 못하도록 하는 것.

* CORS 존재이유
 - 내 브라우저에서 다른 사이트로 요청이 못가는 것을 풀어주는 것
 - Cross-Origin으로 Same-Origin과는 반대의 말
 - 다른 출처 간에 리소스를 공유할 수 있도록 하는 것이다.

SOP(Same-Origin Policy, 동일 출저 정책)
- 다른 출처(Origin)의 리소스를 사용하는 것에 제한하는 보안 방식
cf) 출처란? 이미지 참고
- 어떤 사이트에서 다른 사이트로 요청이 못가게끔 하는 것
- 동일한 출처, URL 끼리만 API 등의 데이터 접근이 가능하도록 하고 다른 URL에 경우는 막는다.
- 상호간 document에도 극히 제한적으로 접근하게 된다.

어떤 기준을 충족시키면 합의된 출처들 간에 합법적으로 자원(리소스) 공유를 허용해주는 것이 CORS, 교차 출처 자원 공유 방식이다.
그 기준은 요청을 받는 백엔드쪽에서 허락할 다른 출처들을 미리 명시해주면 된다.

CORS 접근제어 시나리오
- 단순 요청(Simple Request)
- 프리플라이트 요청(Preflight Request)
- 인증정보 포함 요청(Credentialed Request)

 * 프리플라이트 요청
  - 사전 확인 작업(본 요청을 보내기 전에 서버에게 요청을 보내도 되는지에 대해 물어보는 것)
  - OPTIONS 메서드를 통해 다른 도메인의 리소스에 요청이 가능한 지 확인 작업을 한다.
  - 요청이 가능하다면 실제 요청(Actual Request)을 보낸다.
  - preflight 요청이 거부되면 actual request는 전송되지 않는다.

 * Simple Request