클라이언트와 서버는 같은 origin을 가진 경우에만 서로 통신을 할 수 있다. -> Same Origin Policy
origin이 다를 때 통신을 무조건 허용하면 보안 상 문제가 생길 위험이 크다.
그래서 CORS를 사용해 서로 다른 origin에서의 통신을 제어한다.
본격적으로 CORS에 대해 알아보기 전에 Same Origin Policy에 대해서 알아보자
다른 출처의 리소스를 사용하는 것을 제한하는 보안 방식
http://github.com:80 를 예시로 들자면
http : 프로토콜
github.com : 호스트
80 : 포트
토큰만으로 사용자를 판단하지 않고 요청 URL을 확인해서 악의적인 요청을 차단한다.
CORS 접근 제어에 사용되는 세 가지 시나리오
Preflight 요청 없이 바로 요청을 보낸다.
Simple Request는 아래와 같은 조건을 만족해야한다.
메서드 : GET, POST, HEAD
Content-Type :
헤더 : Accept, Accept-Language, Content-Language, Content-Type
OPTIONS 메서드를 통해 다른 도메인 리소스에 요청이 가능한지 확인하는 작업
요청이 가능한 것을 확인하면 실제 요청을 보낸다.
Origin: 요청 출처
Access-Control-Request-Method: 실제 요청의 메서드
Access-Control-Request-Headers: 실제 요청의 추가 헤더
Access-Control-Allow-Origin : 허가 출처
Access-Control-Allow-Methods : 허가 메서드
Access-Control-Allow-Headers : 허가 헤더
Access-Control-Max-Age : Preflight 응답 캐시 시간
여기서 Preflight의 응답 코드는 200대여야 하고 Body는 비어있는 것이 좋다
인증 관련 헤더를 포함할 때 사용하는 요청
쿠키 또는 JWT 토큰을 담아 보낼 경우 credentials : include 를 포함해서 보낸다.
Access-Control-Allow-Credentials : true 해야 클라이언트의 인증 포함 요청에 허용이 가능하다.