Fetch API & CORS Architecture
The Fetch API provides a promise-based interface for making asynchronous HTTP requests across the browser network stack.
1. Fetch Error Gotchas (HTTP 404/500)
Unlike traditional AJAX wrappers, a fetch() Promise does NOT reject on HTTP error statuses (like 404 or 500). It only rejects on total network failure or blocked requests. Always inspect response.ok (boolean) or response.status!
2. CORS & Preflight Requests
Cross-Origin Resource Sharing (CORS) enforces browser security boundaries. Non-simple requests (e.g. custom headers like Authorization, or methods like PUT/DELETE) automatically trigger an HTTP OPTIONS preflight request to negotiate server permissions via Access-Control-Allow-Origin.
3. Request Timeout & AbortController
Cancel hanging requests using an AbortController instance linked to fetch(url, { signal: controller.signal }).
The Challenge: Resilient Fetch Retry Mechanism
Implement an async function fetchWithRetry(fetchFn, maxRetries) that attempts a network call up to maxRetries times before throwing the final network error.