Errors / Blocked by the browser

Access to fetch at '…' from origin '…' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

The page asked another website for data, and that website did not say this page may read it.

The data never reaches the page: a form that does not send, a price or a list that does not appear.

Why it happens

• A request from one origin (your site) to another (an API, a subdomain, a vendor) whose answer lacks Access-Control-Allow-Origin naming your site or *.
• The API answered an error (a 404, a 500, a redirect to a login) without the CORS headers, so the browser reports CORS rather than the error.
• www and the bare domain, or http and https, are different origins: an API that allows one refuses the other.

How to fix it

1. The fix is on the server that answers, never in the page: add Access-Control-Allow-Origin: https://your-site (and Vary: Origin if it varies).
2. Check the request's status in the network tab; if it is an error, fix that first, and make error responses carry the CORS headers too.
3. For a third-party API that does not allow browsers, call it from your own server instead.
4. A mode: "no-cors" fetch does not fix it: it hides the answer from your code.

Whose problem it is

Usually the server that answers the request.

Often seen with

• Preflight doesn't pass access control checkBefore sending its real request, the browser asked the other server for permission, and did not get it.
• TypeError: Failed to fetchThe page tried to get data from a server and the request never completed.