CORS (Cross-Origin Resource Sharing)

CORS라는 개념을 왜 이해하기 힘들었나요?

월요일날 정리할 개념이 많기도하고 제일 마지막에 있으면서 제일 불친절하게 17분 영상짜리 던져놓은 느낌이라

집중이 잘안되서 이해하기 힘들었습니다. 

웹개발 짜증유발자라고 소문이 나있는 친구입니다.

그래서 CORS가 뭔가요 ? 

Cross-Origin Resource Sharing을 줄인 약자로, 한글로 직역하면 교차출처 리소스 공유 라고 합니다.

 

추가 HTTP 헤더를 사용하여, 한 출처(Origin)에서 실행 중인 웹 애플리케이션이 다른 출처(Origin)의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다.

 

간단히 말하면, 서로 다른 출처끼리 정보요청과 반환을 가능케하고 서버 쪽에서 클라이언트를 대상으로 리소스의 허용 여부를 결정하는 것이 CORS입니다.

원래는 서로 다른 출처끼리 요청을 주고 받는게 브라우저에서는 금지되어있었습니다.

하지만 웹 생태계들이 다양해지면서 자유롭게 정보를 주고받을 필요성이 증가해 CORS가 생겨난 거라고 보시면 됩니다.

 

어떻게 사용하나요?

백엔드 서버를 프로그래밍할 때 쓰는 프레임워크(스프링, 장고, Express)들을 살펴보면 CORS 옵션을 넣는 방법들이 쉽게 마련 되어있습니다. 이제 거기서 사이트를 지정하면 그 지정한 사이트에서는 그 서버로 얼마든지 HTTP 요청을 보낼 수 있습니다. 별표, 와일드카드를 적어넣으면 누구나 쓸 수 있게 됩니다. 그리고 CORS에서 요청들은 두종류로 나눠집니다.

 

Simple Request (단순 요청)

클라이언트와 서버간에 간단한 통신을 하고, CORS 헤더를 사용하여 권한을 처리합니다.

 

Preflight request (미리 전송 요청)

simple request와는 달리 먼저 option 메서드를 통해 다른 도메인의 리소스로 HTTP 요청을 보내 실제 요청이 전송하기에 안전한지 확인합니다. cross-origin 요청은 유저 데이터에 영향을 줄 수 있기 때문에 이와같이 미리 전송(preflighted)합니다.

 

이 글은 누가 읽어야 하나요? 

모든 사람이요, 진짜로. by MDN

명확히 말하자면, 이 글은 웹 관리자, 서버 개발자 그리고 프론트엔드 개발자를 위한 것입니다. 최신 브라우저는 헤더와 정책 집행을 포함한 클라이언트 측 교차 출처 공유를 처리합니다. 그러나 CORS 표준에 맞춘다는 것은 서버에서도 새로운 요청과 응답 헤더를 처리해야 한다는 것입니다.