API 호출이 두 번 발생하는 이유: 프리플라이트 및 XHR 이해

DevTools의 Network 탭을 검사할 때, 나는 종종 다른 요청 유형으로 중복 API 호출을 발견하게 됩니다. 특히 preflight 및 xhr입니다. 이 현상은 일반적으로 CORS(Cross-Origin Resource Sharing)에 관련이 있습니다. XMLHttpRequest(XHR)는 클라이언트가 서버에 데이터 요청을 보내는 실제 API 호출입니다. 프리플라이트 요청은 브라우저가 현재 원본에서 API가 요청을 허용할지 확인하는 작은 요청입니다. 이 요청은 일반적으로 OPTIONS 요청으로, 진행 허가를 요청합니다. 서버가 적절한 Access-Control-Allow-* 헤더를 응답하면 브라우저는 실제 XHR 호출을 보냅니다. 브라우저는 먼저 프리플라이트가 필요한지 확인하고, 필요한 경우 OPTIONS 요청을 보내고, 허가가 있으면 XHR 요청을 보냅니다. 서버가 허가를 거부하면 XHR 요청이 차단됩니다. 프리플라이트 요청을 이해하는 것은 QA가 중복 API 호출이 버그가 아니라 보안 기능임을 알 수 있도록 중요합니다. 또한 QA가 CORS 허가 및 서버 응답의 Access-Control-Allow-Origin와 같은 헤더를 테스트하고 확인할 수 있도록 도움이 됩니다.