CORS 정리

CORS (Cross Origin Resource Sharing) :  다른 출처의 자원을 공유하는 것.

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

 

CORS 접근제어에 사용되는 3가지의 시나리오가 있다.

• 단순 요청 (Simple Request)
• 사전 요청 (Preflight Request)
• 인증 요청 (Credentialed Request)

1. 단순 요청 (Simple Request)

Preflight 요청 없이 바로 요청을 보내는 방식이다.
Simple Request는 아래와 같은 조건을 만족해야한다.

• 메서드 : GET, POST, HEAD
• Content-Type은 아래 셋 중 하나여야 한다.
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
• 헤더 : Accept, Accept-Language, Content-Language, Content-Type 만 허용 한다.

2. 사전 요청 (Preflight Request)

사전 요청은 OPTIONS 메서드를 통해 다른 도메인 리소스에 요청이 가능한지 확인하는 작업이다.
요청이 가능한 것을 확인하면 실제 요청을 보낸다.

Preflight Request

• Origin : 요청 출처
• Access-Control-Request-Method : 실제 요청의 메서드
• Access-Control-Request-Headers : 실제 요청의 추가 헤더

Preflight Response

• Access-Control-Allow-Origin : 허가 출처
• Access-Control-Allow-Methods : 허가 메서드
• Access-Control-Allow-Headers : 허가 헤더
• Access-Control-Max-Age : Preflight 응답 캐시 시간

여기서 Preflight Response의 응답 코드는 200대여야하고 Body는 비어있는 것이 좋다.

3. 인증 요청 (Credentialed Request)

인증 관련 헤더를 포함할 때 사용하는 요청이다.

클라이언트

쿠키 또는 JWT 토큰을 담아 보낼 경우 credentials : include 를 포함하여 보낸다.

서버

Access-Control-Allow-Credentials : true 해야 클라이언트의 인증 포함 요청에 허용이 가능하다.

 

CORS 설정 방법

• 프론트 프록시 서버 설정
  • 프론트 서버에서 백엔드 서버로 요청을 보낼 때, 대상의 URL을 변경한다.
• 직접 헤더 설정
  • 직접 헤더에 설정을 추가한다.
• 스프링부트 설정
  • 설정 클래스를 만들고 WebMvcConfigurer을 구현하면 addCorsMappings란 메서드를 사용하여 CORS의 출처 및 설정 관리를 할 수 있다.

 

[ 참고 ] : https://velog.io/@frankle97/CORS%EB%9E%80