CORS (Cross-Origin Resource Sharing)란 무엇일까?

✔ CORS란?

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)이다.

도메인이 다른 도메인에  리소스를 요청할 때 접근 권한을 부여하는 메커니즘

 

추가 HTTP헤더를 사용하여, 실행 중인 웹 애플리케이션이 다른 출처의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제

 

웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행

 

✔ SOP란?

동일 출처 정책(Same-Origin Policy)이다.

브라우저가 다른 출처의 리소스 접근을 금지하는 정책. 자신의 출처와 동일한 리소스만 불러올 수 있다.

따라서 다른 출처의 리소스를 불러오기 위해서는 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해주어야 한다.

 

✔ CORS 동작 방식

1. 다른 출처의 리소스를 요청할 때 HTTP Request 헤더의 Origin 필드에 자신의 출처를 담아 전송한다.

2. 서버는 요청에 대한 Response 헤더의 Access-Control-Allow-Origin 필드에 "리소스를 접근하는 것이 허용된 출처"라고 명시하고 응답한다. 

Access-Control-Allow-Origin : *

<모든 도메인>에서 접근할 수 있음을 의미

Access-Control-Allow-Origin : https://foo.example

<https://foo.example> 이외의 도메인은 리소스에 접근할 수 없음

 

3. 응답을 받은 브라우저는 자신이 보낸 Origin과 응답의 Access-Control-Allow-Origin을 비교해 응답이 유효한지 확인한다.

 

✔ CORS 요청 시나리오

1. Simple Request

단순 요청 방법으로 서버에게 바로 요청을 보내는  방법이다.

브라우저는 서버에 리소스를 요청하고 서버로부터 받은 응답의 Access-Control-Allow-Origin헤더를 확인해 CORS 동작을 수행할지 판단한다.

 

2. Preflight Request

'Preflight request'는 'Simple Request' 와는 달리, 먼저 HTTP OPTIONS 메서드를 통해 다른 도메인의 리소스로 HTTP 요청을 보내 실제 요청이 전송하기에 안전한지 확인한다.

OPTIONS 메소드로 서버에 예비 요청을 먼저 보내고, 서버로부터 받은 응답의 Access-Control-Allow-Origin헤더를 확인해 CORS 동작을 수행할지 판단한다.