Preflight와 XHR: 웹 개발에서 꼭 알아야 할 개념

웹 개발에서 서버와 클라이언트 간 통신은 필수적입니다. 이 과정에서 자주 등장하는 Preflight 요청과 **XHR(XMLHttpRequest)**에 대해 간단히 알아보겠습니다.

1. Preflight 요청이란?

Preflight 요청은 CORS(Cross-Origin Resource Sharing) 정책에 따라 브라우저가 크로스 오리진 요청을 보내기 전에 서버의 허용 여부를 확인하는 사전 요청입니다. 주로 OPTIONS 메서드로 실행됩니다.

주요 특징

• 왜 필요한가?: 보안 강화를 위해, 다른 도메인으로의 요청이 안전한지 확인합니다.
• 언제 발생하나?:
  • 비표준 HTTP 메서드(예: PUT, DELETE) 사용 시
  • 커스텀 헤더(예: X-Custom-Header) 추가 시
  • 특정 MIME 타입(예: application/json) 사용 시
• 동작 과정:
  1. 브라우저가 OPTIONS 요청을 서버로 보냄
  2. 서버는 Access-Control-Allow-Origin, Access-Control-Allow-Methods 등으로 응답
  3. 허용되면 실제 요청 진행

예시

OPTIONS /api/resource HTTP/1.1
Host: example.com
Access-Control-Request-Method: POST
Origin: http://client.com

서버 응답:

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: http://client.com
Access-Control-Allow-Methods: GET, POST

2. XHR(XMLHttpRequest)이란?

XHR은 브라우저에서 서버와 비동기적으로 데이터를 주고받기 위한 JavaScript API입니다. AJAX 구현의 핵심 기술로, 페이지 새로고침 없이 데이터를 처리합니다.

주요 특징

• 비동기 통신: 페이지를 새로고침하지 않고 데이터 요청 가능
• 다양한 데이터 처리: JSON, XML, 텍스트 등 지원
• HTTP 메서드 지원: GET, POST, PUT 등

간단한 사용 예시

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

상태 코드

• 0: 요청 초기화 전
• 1: 서버 연결 설정
• 4: 요청 완료 및 응답 준비

Preflight와 XHR의 관계

XHR로 크로스 오리진 요청을 보낼 때, 브라우저는 CORS 정책에 따라 Preflight 요청을 먼저 보낼 수 있습니다. 서버가 이를 허용해야 실제 XHR 요청이 진행됩니다. 예를 들어, 커스텀 헤더가 포함된 POST 요청은 Preflight를 유발할 가능성이 높습니다.

마무리

• Preflight: 크로스 오리진 요청 전 서버 허용 여부를 확인하는 사전 단계
• XHR: 비동기 통신을 위한 강력한 도구 이 두 개념은 현대 웹 개발에서 필수적이며, CORS 정책과 비동기 통신을 이해하는 데 핵심적인 역할을 합니다.