Await StationISSUE #10 of 26

fetch · POST · PUT · DELETE

PromissaVSRace Condition Rex

Promissa saysSend data by setting method POST/PUT/DELETE, a Content-Type header, and a stringified body.

To create or update, pass { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }. Use PUT to replace, PATCH to partially update, DELETE to remove. For file uploads, send a FormData body (don't set Content-Type — the browser adds the multipart boundary).

Power-ups you unlock

method: POST/PUT/PATCH/DELETE
JSON: set Content-Type + JSON.stringify(body)
FormData body for file uploads
Let the browser set Content-Type for FormData

Race Condition Rex attacks — common mistakes

Sending a JS object directly (must stringify)
Missing Content-Type so the server misreads JSON
Manually setting Content-Type for FormData

Boss battleSketch a POST that sends a JSON body with the right header.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:monospace;padding:20px"><pre>await fetch('/api/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'drew' })
});</pre></body></html>

▶ Open the interactive comic issue

‹ Fetch · Request · Response · Headers Fetch · Streaming · ReadableStream ›