API Works in curl but Fails in the Browser

A browser enforces cross-origin rules that a command-line HTTP client does not. If curl works but browser JavaScript cannot read the response, inspect the browser's request and error. The API may be reachable while its CORS configuration prevents the browser from exposing the response to your code.

Compare the real requests

Record page origin, API origin, method, headers and whether credentials are included. An origin includes scheme, hostname and port. Two localhost ports can therefore be different origins.

In the browser Network panel, look for an OPTIONS preflight and the actual request. Compare the failing request with the curl request rather than assuming they are identical.

MDN's CORS guide explains the browser's checks and credential restrictions.

Read the first failed boundary

Observation	Next investigation
Preflight fails	Allowed origin, method and headers
Actual response lacks CORS headers	Application or proxy response path
Only error responses fail	Headers missing from error handling
Credentials plus wildcard origin	Explicit permitted origin required
Network or TLS error	Fix transport before CORS

A browser console can report a CORS symptom when an upstream error response lacks the expected headers. Inspect the HTTP status and server logs.

Configure the intended origin

Allow the specific origins that should call the API. For credentialed requests, a wildcard origin is not a valid substitute for an explicit allowed origin and the required credential handling.

If the server selects an origin dynamically, validate it against a controlled allowlist. Reflecting every incoming Origin header can expose data.

Make sure preflight handling does not require a session cookie that the browser does not send on the preflight. Keep authentication on the actual protected operation.

Avoid fixes that hide the result

Using mode: "no-cors" does not turn an arbitrary API response into readable JSON. Disabling browser protections only changes your test environment. Neither fixes the application's cross-origin contract.

A development proxy can be useful, but document the production architecture. A proxy that exists only on your laptop can hide a deployment problem.

Verify the complete flow

Test one successful request, one validation error and one unauthorized request from an allowed origin. Then test a disallowed origin. Confirm that the browser behaves as intended in each case.

When an AI coding tool proposes a quick CORS change, review its scope before applying it. The coding tools guide compares assistants; this test gives you an objective way to judge the fix they produce.

Related troubleshooting

• Login Cookie Missing in Production
• NGINX 502 with a Running Docker Container

This guide draws on the linked documentation. Examples are illustrative unless explicitly identified as measured results.