CORS(Cross-Origin Resource Sharing)

클라이언트(브라우저)에서는 어떤 방식으로 요청을 하느냐에 따라 각 출처(Same Origin, Cross Origin)에 대해 다른 방식을 가지고 처리하고 있습니다.

 

그렇다면 여기서 말하는 출처(Origin)란 무엇일까요?

 

아래와 같은 URL이 있을 때 출처(Origin)에 해당하는 부분은 Protocol+Host+Port 까지 입니다.

https://hacksms.tistory.com:443/hello

 

만약 Protocol, Host, Port까지 동일한 출처(Origin)일 경우 이를 Same Origin이라고 부르며, Protocol, Host, Port 중 하나라도 다른 것이 있다면 이를 Cross Origin이라고 부릅니다.

 

HTML Tag - CORS(Cross-origin resource sharing)

HTML Tag의 경우 다른 출처(Origin)의 자원에도 접근이 가능한 CORS(Cross-origin resource sharing) 정책을 따르고 있습니다.

다른 출처의 자원 접근 가능

 

javascript 구문을 이용한 Request(XMLHttpRequest, Fetch API) - Same Origin

자바스크립트를 이용한 Request의 경우 동일한 출처의 자원에만 접근할 수 있는 Same Origin 정책을 따르고 있습니다.

다른 출처의 자원 접근 불가

---

Cross Origin Resource Sharing (CORS)

Same Origin 정책이 적용된 XMLHttpRequest에서 다른 출처의 자원에 접근할 경우, 아래와 같은 CORS 에러가 발생하는 것을 확인할 수 있습니다.

CORS 에러

 

Same Origin 정책을 사용하는 경우 접근하고자 하는 자원의 출처가 자신의 출처와 다를 때 서버의 반응 값을 통해 자원을 사용해도 될 지를 확인하는데 이 과정을 바로 CORS라고 부릅니다.

 

CORS 동작 과정

1. HTTP Request 내 Origin Header에 자신의 출처를 포함하여 전송

HTTP Request (CORS)

 

2. 서버는 Response 내 Access-Control-Allow-Origin Header에 허용시킬 출처를 포함하여 전송

HTTP Response (CORS)

 

3. 클라이언트에서는 서버에서 전달한 Access-Control-Allow-Origin Header 값과 자신의 출처(Origin)가 동일한 지 비교 후 차단 여부를 결정

CORS 결과