ErrorWeb/CORS
blocked by CORS policy: No Access-Control-Allow-Origin
Why the browser blocks a fetch with No Access-Control-Allow-Origin, why it's a server-side header problem, and the real fixes versus dead ends.
Last updated
ErrorWeb/CORS
Access to fetch at 'https://api.example.com/data' from origin 'https://app.example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
What it means: The browser made the cross-origin request and received a response, but it blocked your JavaScript from reading that response because the server didn't send a header explicitly allowing your page's origin.
Likely causes
Most probable first — with how to confirm.
- 1.The server (API) doesn't send CORS headers at all — this is a server-side configuration issue, not something fixable from the frontend; check the Network tab's response headers for `Access-Control-Allow-Origin`.
- 2.The server sends CORS headers, but for a different origin than yours, and your page's origin (protocol + host + port) doesn't match — a scheme or port mismatch (http vs https, :3000 vs :3001) counts as a different origin.
- 3.The request is 'preflighted' (a custom header, a method like PUT/DELETE, or a non-standard Content-Type) and the server doesn't handle the OPTIONS preflight correctly, even though the underlying GET or POST would have worked fine.
- 4.You're calling a production API directly from a local dev server whose origin was never allowlisted, since production APIs typically only allow their real frontend's origin.
Fixes
Safest first; destructive ones are called out.
- →Fix it on the server: add or correct the `Access-Control-Allow-Origin` header, and handle `OPTIONS` preflight requests if you're using custom headers or non-GET/POST methods — this is the only real, permanent fix, since only the server can grant cross-origin access.
- →For local development against an API you don't control, proxy the request through your own dev server (a Next.js API route, or a Vite/webpack dev proxy) so the browser sees a same-origin request.
- →Don't rely on CORS-disabling browser extensions or launching the browser with security disabled to 'fix' this — it only hides the problem in your own browser and does nothing for real users.
- →If you do control the server, avoid a wildcard `Access-Control-Allow-Origin: *` on endpoints that use cookies or auth headers — browsers reject the wildcard combined with credentials, so echo back the specific origin instead.