[HTTP] Preflight Request, Simple Request

CORS에 Preflight Request, Simple Request 절차

CORS란

💡 “다른 출처”에 리소스를 요청할 때 지켜야 하는 정책

• 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려줌

Preflight Request (사전 요청)

CORS Preflight Request는 HTTP 요청 전에 서버 측에서 그 요청의 메서드와 헤더에 대해 인식하고 있는지 확인하는 요청

출처: https://velog.io/@wiostz98kr/CORS의-모든-것

• 서버 상태를 변경할 수 있는 요청 또는 커스텀 헤더를 포함하는 요청 POST, PUT, PATCH, GET(with custom headers)
  
• OPTIONS 요청 주어진 URL 또는 서버에 대해 허용된 통신 옵션을 요청 → 클라이언트는 URL을 지정하거나 *를 지정하여 전체 서버를 참조

  OPTIONS /resources/post-here/ HTTP/1.1
  Host: bar.example
  Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
  Accept-Language: en-us,en;q=0.5
  Accept-Encoding: gzip,deflate
  Connection: keep-alive
  Origin: https://foo.example
  Access-Control-Request-Method: POST
  Access-Control-Request-Headers: X-PINGOTHER, Content-Type

• 브라우저에서 자동으로 발생 Simple Request의 경우 Preflingt Regust가 생략
  
• 예시
  • 클라이언트가 DELETE 요청을 하기 전에 Preflight Request를 통해 서버가 DELETE를 허용하는지 확인

    OPTIONS /resource/foo
    Access-Control-Request-Method: DELETE
    Access-Control-Request-Headers: origin, x-requested-with
    Origin: https://foo.bar.org

  • 서버가 허용하는 경우, Access-Control-Allow-Methods 헤더 값에 DELETE를 포함하여 응답

    HTTP/1.1 204 No Content
    Connection: keep-alive
    Access-Control-Allow-Origin: https://foo.bar.org
    Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE
    Access-Control-Max-Age: 86400

Simple Request (단순 요청)

CORS Preflight 요청 없이 직접 전송되는 요청

• GET, HEAD와 같이 서버 상태를 조회하는 요청, 서버는 응답과 함께 CORS 헤더를 보내고, 브라우저는 해당 헤더가 요청과 부합하지 않는 경우 결과를 폐기

출처: https://velog.io/@wiostz98kr/CORS의-모든-것

• 아래의 조건을 모두 만족해야한 Preflight Request 생략 가능
  • 요청의 메소는 GET, HEAD, POST 중 하나여야 함
  • Accept, Accept-Language, Content-Language, Content-Type, DPR, DOwnlink, Save-Data, Viewport-Width, Width를 제외한 헤더를 사용하면 안됨
  • Content-Type를 사용하는 경우에 application/x-www-form-urlencoded, multipart/form-data, text/plain만 허용 (application/json 컨텐츠 타입 X)