My fetch worked in curl but failed in the page. The browser adds a rule curl does not: a page may only read a cross-origin response if the server allows it.
About 1 min of reading
See the same call work in curl and fail in a page, then fix it on the server.
curl ignores origin rules, so it works.
Before you run it, say out loud what it will print. Then open the answer.
In a page the same fetch is blocked until the server sends the header. Fix it on the server.
Before you run it, say out loud what it will print. Then open the answer.
CORS is a server policy, not a browser one. The server says which origins may read it via Access-Control-Allow-Origin. If the header is absent, the browser refuses. So the fix is always on the server, never in the page.
A request with non-simple headers or methods triggers an OPTIONS preflight. The server must allow those headers or the real call is blocked. A confusing CORS error is often a preflight that said no to one header name.
curl https://api.other/data # worksfetch('https://api.other/data') // blocked in a pageSame request, different result. The browser enforces an origin rule that curl ignores, because a page runs user code.
Access-Control-Allow-Origin: *That header is the opt-in. Without it the browser hides the response. The server, not the page, decides who may read it.
OPTIONS /data
Access-Control-Allow-Headers: AuthorizationA request with custom headers sends an OPTIONS check first. The server must answer it, or the real request never fires.
Each one is defined here on this site. Open the entry for the full definition and the other words it points at.