CORS 와 브라우저 prefilight 요청

* CORS(Cross-Origin Resource Sharing) 란 브라우저에서 서로 다른 출처(origin) 간의 자원 요청을 제어하는 보안 정책

* Origin 은 프로토콜, 호스트, 포트가 모두 같아야 같은 Origin으로 인식하고 다른 출처에선 웹 애플리케이션 단에서 허용을 해줘야 합니다. 

 

* CORS 관련 헤더 

Access-Control-Allow-Origin : 허용할 출처

Access-Control-Allow-Methods : 허용할 HTTP 메서드

Access-Control-Allow-Headers : 허용할 커스텀 헤더

Access-Control-Allow-Credentials : 인증 정보(Cookie 등)를 포함할지 여부

 

CORS 환경에서 단순 요청(Simple)과 예비요청(Prefilight)

 

Cross-origin 요청에서 브라우저는 유저 데이터에 영향을 줄 수 있기 때문에 미리 Options 메서드를 먼저 요청하는 예비 요청(prefilight)이 존재하고  그 외에 경우 단순 요청(Simple)하는 경우가 존재합니다. 

 

브라우저에서 Prefilight 요청을 하는 이유 

* OPTIONS 메서드를 통해 다른 도메인의 리소스로 HTTP 요청을 보내 실제 요청이 전송하기에 안전한지 확인한다.

 안전하다고 응답을 받으면 기존 요청을 수행 

 

* Simple 요청을 하는 경우

1) GET / POST / HEAD 메서드로 요청 하는 경우

2) 설정 헤더 Accept, Accept-Language, Content-Language, Content-Type 사용하는 경우 

3) Content-Type 헤더는 application/x-www-form-urlencoded, text/plain, multipart/form-data 외에 1개 

 

* Prefilight 요청을 하는 경우 

1) 단순요청에 사용된 헤더가 아닌 경우

 EX) PUT, DELETE, OPTIONS, PATCH 방식을 사용하는 경우 

 

2) 단순 요청이 아닌 헤더를 포함하여 요청한 경우

3) Content-Type 유형이 text/plain, multipart/form-data 또는 application/x-www-form-urlencoded 이 아닌 경우
EX) application/json 으로 사용 시 발생

4) 하나 이상의 이벤트 리스너가 XMLHttpRequestUpload에 등록되어 있는 경우

 

* CORS 환경에서 4가지 경우 중 1개 이상일 경우 Prefilight 요청 발생