1. CORS

Cross-origin resource sharing (교차-출처 리소스 공유)

---

지정된 도메인(출처)의 외부에 있는 리소스에 대한 액세스를 제어할 수 있는 브라우저 메커니즘

💡 교차-출처란 다른-출처로 해석하면 이해하기 쉽다.

2. Origin

출처

---

protocol Host port 를 포함한 url의 일부분

ex) https:// velog.io :443

💡 도메인으로 생각하면 이해하기 쉽다. 다만 출처에 포트번호가 명시적으로 포함된 경우 해당 포트번호까지 일치해야 같은 출처로 간주됨 .

3. CORS process

CORS 동작 과정

---

📌 예시

: 사용자가 http://www.example.com를 방문하여 http://service.example.com로부터 데이터를 가져오기위해 CORS를 시도하는 경우

1) browser -> server

브라우저는 해당 요청 HTTP 헤더에 다음과 같이 Origin 필드를 추가한다.

Origin: http://www.example.com 

2) server -> browser

서버는 요청에 대한 응답 HTTP 헤더에 다음과 같이 Access-Control-Allow-Origin 필드를 추가할 수 있다.

2-1) 해당 출처에 대한 요청을 허용

Access-Control-Allow-Origin: http://www.example.com

2-2) 모든 출처에 대한 요청을 허용

Access-Control-Allow-Origin: *

2-3) 해당 출처에 대한 요청을 허용하지 않음

-> CORS Error 발생 

3) browser : 응답 유효성 판단

브라우저는 자신이 보냈던 요청의 Origin과 서버가 보내준 응답의 Access-Control-Allow-Origin을 비교해본 후 이 응답이 유효한 응답인지 아닌지를 결정한다.

참고)

https://en.wikipedia.org/wiki/Cross-origin_resource_sharing#Browser_support
https://portswigger.net/web-security/cors
https://evan-moon.github.io/2020/05/21/about-cors/