CORS란?

교차 출처 리소스 공유 (Cross-Origin Resource Sharing)

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

https://domain-a.com 의 프론트 엔드 JavaScript 코드가 XMLHttpRequest를 사용하여 https://domain-b.com/data.json 을 요청하는 경우.

보안 상의 이유로, 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한합니다. 예를 들어, XMLHttpRequest와 Fetch API는 동일 출처 정책(same-origin policy)을 따릅니다. 즉, 이 API를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야 합니다.

기능적 개요

CORS의 표준은 웹 브라우저에서 해당 정보를 읽는 것이 허용된 출처를 서버에서 설명할 수 있는 새로운 HTTP 헤더를 추가함으로써 동작합니다. 서버 데이터에 side effect를 일으킬 수 있는 메서드에 대해(GET 제외), OPTIONS 메서드로 preflight를 날린 후 서버의 "허가" 후에 실제 요청을 보내도록 요구합니다.

접근 제어 시나리오 예제

단순 요청

단순 요청의 경우 preflight를 사용하지 않습니다. 단순 요청의 조건은 이하와 같습니다.

• GET, HEAD, POST 중 하나의 메서드
• 커스텀 헤더 설정 안 함
• Content-Type 헤더로는 application/x-www-form-urlencoded multipart/form-data text/plain 만 사용 가능

단순 요청의 경우 한 번의 요청과 한 번의 응답만 있습니다.

프리플라이트 요청

위의 단순 요청이 아닌 경우 OPTIONS 메서드로 preflight를 보낸다.

OPTIONS 메서드에서는 2개의 헤더를 보낸다.

Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER, Content-Type

실제 사용될 메서드와 헤더를 보내서 허가가 가능한지를 보는 것이다.
그 응답으로 서버에서는 밑과 같은 응답을 보내준다.

Access-Control-Allow-Origin: http://foo.example
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400

어떤 메서드, 헤더가 사용될 수 있는지 이 프리플라이트가 얼마나 더 유효한지를 알려준다.

Credential을 포함한 요청

Http Cookie와 Http Authentication 정보를 인식할 수 있게 해주는 요청입니다.

요청 시 xhr.withCredentials = true를 지정해서 보내야하고 서버는 응답헤더에 반드시 Access-Control-Allow-Credentials: ture 를 포함해야 합니다. Access-Control-Allow-Origin헤더 값으로 *이 들어갈 수 없고 도메인이 와야 합니다.