서로 다른 Origin 사이에 자원을 공유하는 방법이 교차 출처 리소스 공유 (CORS; Cross-Orgin Resource Sharing)이다. CORS는 외부 리소스의 엑세스 제한하는 보안 정책이다.

CORS는 클라이언트에서 서버로 요청을 하기 직전까지의 권한 확인 절차다.

• 보호 대상은 클라이언트가 아니라 '서버'다.
• 허가되지 않은 웹사이트에서의 이용을 막기 위함이다.

Simple Request (간단 요청)

아래 조건을 만족하는 메서드들은 별도의 요청없이 호출이 가능하다

• HTTP 요청 메서드가 GET / POST / HEAD 중 하나일 경우
• 아래 이외의 헤더가 사용되지 않는 경우
  • Accept, Accept-Language, Content-Language, Content-Type
• 단, Content-Type이 사용되는 경우 그 값이 아래 중 하나일 경우
  • application/x-www-form-urlencoded, multipart/form-data, text-plain

단, 간단요청이라 하더라도 서버의 응답에 Access-Control-Allow-Origin 헤더가 포함되어 있어야한다.

Preflight Request

위 Simple Request 조건을 만족하지 않는 경우 별도의 요청 권한 확인을 위해 Preflight 요청을 날려 확인하는 절차가 추가된다.

preflight 요청은 클라이언트가 OPTIONS 메서드에 아래 헤더를 추가하여 서버로 요청한다

• Access-Control-Request-Method: 통신하길 원하는 메서드를 지정
• Access-Control-Requset-Headers: 허용하길 원하는 헤더를 쉼표로 나열
• Origin: 통신 출처 웹 페이지의 도메인을 지정

CORS 리소스에서는 기본적으로 쿠키를 전달하지 않는다. 다만 credentials: include로 요청하고 서버가 허가한 경우에만 쿠키를 전송한다.

서버는 아래 내용을 추가하여 응답한다.

• Access-Control-Allow-Origin: 통신을 허용할 Origin을 나열. 쿠키 미사용시에는 와일드카드(*)로 모든 도메인 허용도 가능함
• Access-Control-Allow-Method: 통신을 허용할 메서드