CORS?

Cross-Origin resource sharing의 약자로 교차 출처 리소스 공유를 뜻한다. 추가 HTTP 헤더를 사용하여 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다.

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

CORS 접근제어 시나리오

하기에 나오는 접근 제한 치나리오는 교차 출처 리소스 공유가 동작하는 방식을 보여준다. 모든 예제는 지원하는 브라우저에서 교차 출처 요청을 생성할 수 있는 XMLHttpRequest를 사용한다.

Simple requests (단순 요청)

단순 요청의 경우 preflight를 사용하지 않는다. 단순 요청의 조건은 다음과 같다.

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

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

Preflighted request (프리플라이트 요청)

단순 요청이 아닌 경우 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

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

Credentialed requests (인증정보를 보함한 요청)

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

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

---

출처

MDN - 교차 출처 리소스 공유