Why Your API Call is Hitting Twice: Understanding Preflight & XHR

When inspecting the Network tab in DevTools, I often notice duplicate API calls with different request types, specifically preflight and xhr. This phenomenon is usually related to CORS (Cross-Origin Resource Sharing). XMLHttpRequest (XHR) is the actual API call that sends data requests from the client to the server. A preflight request is a small request sent by the browser to check if the API will accept a request from the current origin. This request is typically an OPTIONS request that asks for permission to proceed. If the server responds with the appropriate Access-Control-Allow-* headers, the browser sends the actual XHR call. The browser first checks if a preflight is required, then sends the OPTIONS request if needed, and finally sends the XHR request if permission is granted. If the server denies permission, the XHR request is blocked. Understanding preflight requests is important for QAs to know that duplicate API calls are not a bug, but rather a security feature. It also helps QAs test CORS permissions and verify server responses with headers like Access-Control-Allow-Origin.