CORS (Cross Origin Resource Sharing)

추가적인 HTTP header를 사용하여 Origin(host) 를 가로질러 자원에 접근할 수 있는 권한을 부여 하도록 브라우저에 알려주는 정책

A -> https://domain-a.com
B -> https://domain-b.com/data.json

일때, api 서버로의 리소스 요청은 SOP(same origin policy) 에 의해 제한된다.

why?

보안상의 이유로, 스크립트에서 교차 출처 HTTP 요청을 제한 하기 때문. (A 랑 B 도메인이 다르다!)
다른 출처의 리소스 를 불러오기 위해선 올바른 CORS 헤더를 포함한 응답을 반환해야 한다.

Origin

SOP(same origin policy 동일 출처 정책)
같은 출처에 대한 HTTP 요청만을 허락한다.
HTML태그 를 통한 이미지 , CSS , Script 요청은 SOP에 의해 제한되지 않음

---

CORS 동작 원리

단순 요청 (Simple Request)

1. 서버에 api를 요청 ( GET , HEAD , POST )

2. Access-Control-Allow-Origin 헤더를 포함한 응답을 받아 확인 후, CORS 동작을 할지 말지 수행 판단!

예비 요청 (Preflight request)

서버에 예비 요청을 보내서 안전한지 판단 후 본 요청을 보내는 방법

1. 실제 리소스를 요청하기 전에 OPTIONS 라는 method를 통해 실제 요청을 전송할지 판단

2. 서버로부터 예비 요청에 대한 응답으로 Access-Control-Allow-Origin 헤더를 포함한 응답을 받음

3. 마지막으로는 단순 요청과 동일하게 Access-Control-Allow-Origin 헤더를 확인해서 CORS 를 수행할지 말지 판단