Explain CORS error code

What this CORS error sample shows

origins

An origin is the scheme, host and port together. http://localhost:5173 and http://localhost:3000 differ only in the port, and that is enough to make them different origins, so the browser treats the API as another origin and applies CORS.

the missing header

The request did reach the API: the server logged GET /api/todos and answered 200. The browser then kept the reply from the page because it had no Access-Control-Allow-Origin header, and fetch threw TypeError: Failed to fetch. A request sent from outside the browser, with the same Origin header, got the JSON back.

the fix

Adding "Access-Control-Allow-Origin": "http://localhost:5173" to the reply's headers made the same fetch work. * worked too, but it lets pages from any origin read the reply. A value naming another origin, http://localhost:3000, failed with has a value 'http://localhost:3000' that is not equal to the supplied origin.

preflight

An Authorization header made the browser ask first: it sent OPTIONS /api/todos, which this server answered with 404 and no Allow-Origin, and stopped with Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present, without sending the GET. Answering OPTIONS with 204, Allow-Origin and Access-Control-Allow-Headers: Authorization let the GET through, and the todos came back.

Good to know

• Run with Node 25.7.0 and Chromium 156, driven by Playwright. The 2 console lines in the sample are what Chromium logged; the page's own catch printed TypeError Failed to fetch.
• mode: 'no-cors' doesn't fix it. The request went out and the server answered 200, but the page got an empty response with status 0, and res.json() failed with Unexpected end of input.

Watch out: CORS doesn't protect your API. It decides what pages from other origins, in a browser, can do with a reply: the plain GET reached the server and got its 200 even when the page couldn't read the answer, and a request from outside a browser read the todos although the reply had no Access-Control-Allow-Origin header. Keep real checks, such as who is signed in, on the server.