When a SPA shows a red Network entry, the fastest path to a fix is often a minimal, shareable reproduction outside the UI. OpenAPI descriptions already encode paths, methods, parameters, and auth schemes — turning them into curl lets you isolate whether the bug is the browser, the BFF, CORS, or the API itself. Guessing headers by hand wastes time; generating them from the spec keeps reproductions honest.
Bottom line: Generate curl from the OpenAPI operation you are calling, inject real auth the same way the app does, and compare request/response headers with what DevTools shows. Use local generators so tokens never upload to a random website.
Who this guide is for
Frontend engineers integrating REST APIs, fullstack developers maintaining OpenAPI specs, and anyone who has pasted a vague "the API is broken" message into Slack without a reproducible command. If your team already has Swagger UI, this workflow complements it with terminal-grade reproductions.
Why curl beats "it failed in the UI"
A failing button click involves routing, state, interceptors, CORS, and sometimes multiple hops. A curl command asks one question: given this method, URL, headers, and body, what does the server return?
Benefits:
- Backend can run the same command without installing your Node app
- You can bisect: same call via curl vs browser vs Postman
- Diffing two curls (working staging vs broken prod) is faster than comparing React trees
- CI can smoke-test critical operations with the same snippets
Generate operation-oriented commands with the OpenAPI Snippet Generator. For one-off calls without a spec, use the curl Command Generator.
Anatomy of a useful OpenAPI-derived curl
A solid snippet includes:
- Method and URL — scheme + host + basePath + path, with path params substituted
- Query parameters — including required filters that the UI always sends
- Headers —
Content-Type, Accept, auth, and any API version header
- Body — raw JSON for POST/PUT/PATCH, matching the schema's required fields
- Verbose flag —
-i or -v when debugging status lines and headers
Example shape:
curl -i -X POST 'https://api.example.com/v1/orders' \
-H 'Accept: application/json' \
-H 'Content-Type: application/json' \
-H 'Authorization: Bearer <token>' \
-H 'X-Request-Id: debug-001' \
--data-raw '{
"sku": "sku_42",
"quantity": 1
}'
Replace <token> locally; never commit real credentials into the repo or a chat log that persists.
OpenAPI securitySchemes map cleanly to curl flags:
| Scheme |
OpenAPI type |
Typical curl |
| Bearer JWT |
http + bearer |
-H 'Authorization: Bearer …' |
| API key header |
apiKey in header |
-H 'X-API-Key: …' |
| API key query |
apiKey in query |
?api_key=… (prefer header if optional) |
| Basic |
http + basic |
-u 'user:pass' |
| OAuth2 |
oauth2 |
Still a bearer token in practice for most SPAs |
Frontend bugs often come from mismatch: the SPA sends Authorization, the spec documents X-API-Key, or the gateway expects both. Generate from the deployed OpenAPI document (or the version your gateway actually loads), not an outdated wiki export.
When a response looks like auth succeeded but the body is HTML login page, parse headers with the HTTP Header Parser — you may be hitting a wrong host or a CDN challenge.
- Capture the failing request in DevTools → Network: method, URL, request headers, payload.
- Locate the operation in OpenAPI (
operationId or path + method).
- Generate a baseline curl with the OpenAPI Snippet Generator.
- Align with DevTools — copy the real
Authorization value (from a dev session), Content-Type, and body. Prefer redacting tokens before sharing.
- Run curl against the same environment. Compare status code and body.
- Interpret:
| Browser |
curl |
Likely area |
| Fails |
Works |
CORS, cookie SameSite, mixed content, frontend bug |
| Fails |
Fails same way |
API, auth, validation, env config |
| Works |
Fails |
Missing header/cookie the browser sends automatically |
| SPA shows error, Network 200 |
Works |
Response parsing / schema mismatch in the client |
- Share the curl (with secrets redacted) plus expected vs actual status in the bug report.
Reproducing common API bug classes
Validation 400s
Generate the body from the schema, then remove one required field and confirm the error shape matches what the SPA surfaces. Frontend error mappers often expect error.fields[] while the API returns details: […].
Wrong base URL / version prefix
OpenAPI servers entries differ across environments. A snippet aimed at https://api.example.com/v1 will not reproduce a bug on https://api.staging.example.com/v2. Pin the host explicitly.
Header case and hop-by-hop issues
HTTP/2 lowercases headers; your gateway docs might show X-Api-Key. Focus on names/values, not cosmetic case. If a proxy strips unknown headers, curl from outside the corporate network vs inside can diverge.
Multipart vs JSON
If the operation consumes multipart/form-data, a JSON --data-raw will fail. Trust the OpenAPI requestBody.content keys when generating snippets.
Idempotency and replay
Some POST endpoints require Idempotency-Key. Include it in the generated headers when the spec defines it — otherwise you cannot reproduce production success paths.
Keeping snippets honest as specs drift
- Regenerate curls when
operationId, path params, or security schemes change
- Lint OpenAPI in CI so examples and required fields stay accurate
- Prefer checked-in example requests in the repo that CI runs weekly
- Document which server URL staging uses in the README next to the generator workflow
Manual curls in Notion pages rot. Spec-driven generation from the OpenAPI Snippet Generator stays closer to truth when you paste the current YAML/JSON.
Privacy and secrets
- Run generators that process OpenAPI in the browser when specs contain internal paths
- Redact
Authorization, cookies, and PII from shared snippets
- Use short-lived staging tokens for reproduction, then revoke them
- Do not paste production service-account keys into any online tool
codefunc tools such as the OpenAPI Snippet Generator, curl Command Generator, and HTTP Header Parser are designed for local processing — still treat live production secrets as out of bounds for casual paste bins.
Practical takeaway
Use OpenAPI as the source of truth for method, path, body, and security headers, then generate curl to reproduce failures outside the SPA. Compare browser Network data with curl results to separate CORS/UI bugs from real API errors. Attach redacted snippets to tickets, keep specs in sync with gateways, and parse confusing response headers with a dedicated header tool. That loop turns "the API feels flaky" into a command anyone on the team can run.
Sources