This content originally appeared on DEV Community and was authored by Sadia Islam
I often notice in the Network tab of DevTools that the same API is being called twice. Even though it’s the same API, the types of requests are different — one is preflight, and the other is xhr. Curious about why this happens, I found out that this usually occurs due to CORS (Cross-Origin Resource Sharing). Let’s try to understand what these things are one by one.
What is XHR?
XHR stands for XMLHttpRequest, which is the actual API call that sends the data request. This is the main API call where the client requests data from the server.
What is a Preflight Request?
When an API call is made that isn’t considered simple, meaning it doesn't meet certain conditions, the browser first sends a small request called a preflight or permission check request. This is typically an OPTIONS request that asks:
Will this API accept a request from this origin?
If the server responds with the appropriate Access-Control-Allow-* headers indicating permission, saying “Yes, you can call me with those headers/credentials” — then the browser proceeds to send the actual xhr call.
How does it work?
- The browser first checks “Does this API call require a preflight?”
- If needed, it sends an OPTIONS (preflight) request first.
- If the server replies "Okay, go ahead", then the browser sends the XHR request.
- If the server denies permission, the XHR request is never sent — the browser blocks it.
I believe this is important for QAs to know because:
- It helps them understand that this is not a bug.
- It aids in understanding security or permission checks: Preflight helps verify whether CORS permissions are set up correctly.
- It allows for testing headers: If QAs know how preflight works, they can check whether the server is correctly responding with headers like Access-Control-Allow-Origin, Access-Control-Allow-Headers, etc.
This content originally appeared on DEV Community and was authored by Sadia Islam
Sadia Islam | Sciencx (2025-06-26T07:41:30+00:00) Why Your API Call is Hitting Twice: Understanding Preflight & XHR. Retrieved from https://www.scien.cx/2025/06/26/why-your-api-call-is-hitting-twice-understanding-preflight-xhr/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.