How to skip the preflight request - Preflight 요청 스킵하는 방법

How to skip the preflight request - Preflight 요청 스킵하는 방법

 

Http Request 과정에서 위 사진과 같이,

Preflight Request가 발생하는 것을 스킵할 수 있는 방법에 대해 알려드리도록 하겠습니다.

 

Preflight Request

우선 Preflight Request가 발생하는 이유에 대해서 간단히 설명 드리겠습니다.

브라우저에서는 cross-origin Actual Request(본 요청)을 하기 전에, 

OPTIONS Method 로 Preflight Request(사전 요청)를 전송하고,

요청 받은 서버에서 Access-Control-Allow-Origin 와 Access-Control-Allow-Methods, 즉 어떤 Origin과 Method에 대하여 접근을 허용하는지 브라우저로 알려줍니다.

그럼 브라우저에서 요청한 Origin과 Method에 이 허용된 것인지 확인이 되면 제대로된 요청을 합니다.

출처 : https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

이에 관해서 많은 설명 문서가 있지만 설명은 이쯤 하고,

이 글의 목적인 Preflight Request 를 스킵하는 방법을 알려드리도록 하겠습니다.

 

How to skip the preflight request

Simple Requests(단순 요청) 이라고 해서 CORS Preflight가 트리거 되지 않는 일부 요청이 있습니다.

Simple Requests에 충족되는 요청 조건입니다.

1. 다음 중 하나의 Method
   • GET 
   • HEAD
   • POST
2. User Agent가 자동으로 설정한 Header외에, 수동으로 설정할 수 있는 헤더는 오직 Fetch 명세에서 "CORS-safelisted request-header"로 정의한 Header 뿐.
   • Accept
   • Accept-Language
   • Content-Language
   • Content-Type (아래 추가 요구 사항에 유의)
   • DPR
   • Downlink
   • Save-Data
   • Viewport-Width
   • Width
3. Content-Type 헤더는 다음의 값들만 허용
   • application/x-www-form-urlencoded
   • multipart/form-data
   • text/plain

위 조건을 충족하면 Preflight Request 과정이 진행되지 않습니다.

 

예를 들어 보도록 하겠습니다.

Simple Request 조건에 충족하지 않게 Content-Type을 application/json 으로 설정하였을 때는,

위 사진과 같이 Preflight가 발생합니다.

 

하지만 위와 같이 Simple Request 조건에 충족하도록 Content-Type을 text/plain 으로 설정하였을 때는,

Preflight Request가 발생하지 않는 것을 확인하실 수 있습니다.

 

 

도움이 되셨다면 공감, 댓글 부탁드립니다!

궁금하신 점이나 요청사항은 언제든지 말씀해주세요!

피드백도 언제나 환영입니다!

 

감사합니다.

 

참고 자료 : https://developer.mozilla.org/ko/docs/Web/HTTP/CORS