Fixing CORS Errors When Fetching JSON APIs

A CORS error shows up in the browser console as something like "has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource." It's genuinely one of the most confusing errors for developers new to web APIs, because the request often actually succeeds on the server — the browser is the one refusing to hand the response back to your JavaScript code.

CORS (Cross-Origin Resource Sharing) is a browser security mechanism, not a network-level restriction. When your frontend running on one origin (say, localhost:3000) tries to fetch data from an API on a different origin (say, api.example.com), the browser checks whether that API has explicitly allowed requests from your origin. If it hasn't, the browser blocks your JavaScript from reading the response — even though the request itself reached the server and the server responded normally.

This is precisely why CORS errors can never be fixed from the frontend alone. No amount of changing your fetch() call, adding headers to your request, or installing a browser extension fixes the underlying issue in a way that works for real users — the permission has to be granted by the server you're calling, because that's whose security policy is being enforced.

The actual fix depends on which server you control. If you own the API, you need to add the Access-Control-Allow-Origin header to its responses, either allowing your specific frontend origin or, for public APIs, allowing all origins with a wildcard. Every major backend framework has a CORS middleware for this — Express has the cors package, ASP.NET Core has built-in CORS middleware you enable in Program.cs, and most others follow the same pattern of allow-listing specific origins.

If you don't control the API — for example, you're calling a third-party service directly from the browser and it doesn't support CORS — you generally cannot fix this from the client side, and the only real workaround is proxying the request through your own backend server, which then calls the third-party API server-to-server (where CORS doesn't apply at all, since CORS is purely a browser-enforced rule) and returns the result to your frontend from your own origin.

A common half-fix people try is adding mode: 'no-cors' to their fetch() call. This actually makes things worse in most cases — it does suppress the console error, but it also makes the response opaque, meaning your JavaScript can no longer read the response body at all. If you find yourself using no-cors and then trying to read response.json() right after, that combination will never work.

During local development, it's also worth checking whether your dev server has a built-in proxy option — many frameworks let you proxy specific API paths through the dev server itself, which sidesteps the CORS issue entirely in development without needing changes on the production API, since the browser sees everything as coming from one origin.

Once you've confirmed the JSON structure you expect to receive is correct on the server side, you can use our JSON Formatter to double-check the response shape while you're setting up the proxy or CORS headers, so you're only debugging one problem at a time instead of two.