Issues

Most AJAX bugs fall into a small set of categories. Recognizing the symptom quickly narrows the cause.

CORS errors

A blocked cross-origin request appears as a generic network error. The browser console contains the actual reason. Fix the server's Access-Control-Allow-Origin, allowed methods, and allowed headers; the client cannot grant itself permission.

CSRF failures

A 419 or 403 on a write usually means a missing or stale CSRF token. Include the token after login and after the session regenerates. A page left open for hours may hold an expired token; handle the error with a refresh prompt.

Race conditions

Out-of-order responses overwrite newer data. Cancel the previous request or tag each request with a sequence number and ignore stale results.

let latest = 0;

async function load(term) {
  const ticket = ++latest;
  const response = await fetch(`/search?q=${encodeURIComponent(term)}`);
  const data = await response.json();

  if (ticket === latest) render(data);
}

Caching surprises

GET responses may be served from the browser cache. Use cache headers intentionally, vary responses by authentication state, and add a version or timestamp parameter only when a stale response is unacceptable. Do not disable caching everywhere by habit.

Duplicate submissions

Double clicks and retries create duplicate records. Disable the submit control, make the operation idempotent, add a unique constraint, or use an idempotency key.

JSON parse errors

An HTML error page, an empty 204, or a proxy login screen breaks response.json(). Check the status and content type, and read the body as text before parsing when diagnosing.

Stale interface state

After a successful write, update the list or refetch the affected data. Do not assume the local array still matches the server; other users may have changed it.

Memory leaks

• Revoke object URLs created for blobs.
• Remove event listeners when elements are removed.
• Cancel polling and streams when a component unmounts.
• Close clients and release stream locks.

Timeout and offline behavior

Set timeouts, show a clear message when the network is unavailable, and listen to online and offline events for retry prompts. A request can hang long enough to look like a frozen page.

Debugging checklist

1. Inspect the request URL, method, headers, and body in the network panel.
2. Check the response status, headers, and raw body.
3. Read the console for CORS, CSP, or parse errors.
4. Reproduce the endpoint with curl or an API client.
5. Compare a working request with the failing one.

Back to course overview · Previous: Security · Next: Fetch API - Basics