Contact 1997

CORS

개요.

실무를 하면서 CORS 문제에 봉착하게 되었다. 1년전에 작성한 글이지만 다시금 정리가 필요하며, 기억하기 위함이다.

선행 설명.

• XMLHttpRequest( 이하 XHR ) 객체는 서버와 상호작용하기 위해 사용된다. 이는 전체 페이지에 대한 리로드 없이 요청 URL 로부터 데이터를 받아올 수 있는데, 흔히 우리가 알고 있는 비동기 ajax 방식에서 주로 쓰인다.

• XHR 은 same-origin 정책을 따르는데 XHR 은 항상 자신과 동일한 도메인으로 HTTP 요청을 보내는 것이 가능했다.

• 여기서 same-origin 정책이란, another origin 으로부터 문서 또는 스크립트 문과 상호작용 하는 것을 제한하는 보안 방식이다.

• 따라서  same-origin 은 세 개의 내용을 판단해서 동일한 origin 인지 식별한다.

• protocol

• port

• host

• 위와 같은 SOP (same-origin-policy) 는 과거에는 괜찮았지만 요즘 같이 api 호출이 잦아지고 외부 도메인 서버와의 연결 및 서드파티 애플리케이션이 많이 생겨나가면서 이를 극복할 필요성을 있었고 이에 따라 나온 것이 CORS (Cross-Origin-Resource-Sharing) 이다.

• 클라이언트는 CORS 를 위해서 새로운 HTTP 헤더를 추가한다.

• 서버는 클라이언트가 요청한 헤더를 확인해서 데이터 요청 여부를 판단한다.

• Access-Control-Request-Method
• 실제 요청 때 사용할 메소드
• Access-Control-Request-Headers
• 브라우저가 실제 요청을 보낼 때 헤더에 추가할 커스텀 속성

• Access-Control-Allow-Origin : 허용하는 Origin
• Access-Control-Request-Methods : 허용하는 요청 메소드
• Access-Control-Allow-Headers : 허용하는 헤더 속성
• Access-Control-Max-Age : prefilight request 캐시하는 시간 (초단위)

• Access-Control-Allow-Credentials : true (사용하기 위해선 서버 Response 헤더에 포함)