CORS

처음 전송되는 리소스의 도메인과 다른 도메인으로부터 리소스가 요청될 경우 해당 리소스는 cross-origin HTTP 요청에 의해 요청된다. 보안 상의 이유로, 브라우저들은 스크립트 내에서 초기화되는 cross-origin HTTP 요청을 제한한다. 따라서 웹 애플리케이션을 개선 시키기 위해, 개발자들은 브라우저 벤더사들에게 XMLHttpRequest가 cross-domain 요청을 할 수 있도록 요청했고 이에 따라 CORS가 생겼다.

CORS는 함축 단어로써 이를 풀면 Cross-Origin Resource Sharing 이라는 단어로 이루어 져 있다. 이 문장을 직역하면 **"교차 출처 리소스 공유 정책"**이라고 해석할 수 있다.

CORS

여기서 교차 출처라고 하는 것은 (엇갈린) 다른 출처를 의미하는 것으로 보면 된다.

Origin(출처)

URL은 여러 개의 구성 요소로 이루어져 있다.

CORS에서 Origin, 즉 출처란 Protocol과 Host 그리고 Port를 모두 합친 URL을 의미한다고 보면 된다.

<aside> 💡 Origin = Protocol + Host + Port

</aside>

따라서 이 세 가지중 하나만 다르더라도 브라우저는 다른 출처라고 인식한다.

CORS의 기본 동작

CORS 정책을 따르려면 아래 동작 과정을 이해해야 한다.

1. 클라이언트에서 HTTP요청의 Header에 Origin을 담아 전달

   1. 웹은 HTTP를 이용하여 서버에 요청을 보내게 되는데 브라우저는 요청 Header에 Origin이라는 필드에 출처를 담아 함께 전송

      

2. 서버는 응답 Header에 Access-Control-Allow-Origin을 담아 클라이언트로 전달

   1. 응답 헤더에 Access-Control-Allow-Origin이라는 필드를 추가하고 값으로 '이 리소스를 접근하는 것이 허용된 출처 url'을 내려보낸다

      

3. 클라이언트에서 Origin과 서버가 보내준 Access-Control-Allow-Origin을 비교

   1. 응답을 받은 브라우저는 자신이 보냈던 요청의 Origin과 서버가 보내준 응답의 Access-Control-Allow-Origin을 비교해본 후 차단할지 말지 결정
   2. 만약 유효하지 않다면 그 응답을 사용하지 않고 버린다
   3. 일치하면 다른 출처의 리소스를 문제없이 가져오게 된다