Error fixes / Browser
Browser
Browser: request blocked by CORS
The browser refused a cross-origin response that did not allow your page's origin.
The error
Access to fetch at 'https://api.example.com/data' from origin 'https://my-app.example' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
What it means
CORS is a browser rule. The page on one origin called an API on another, and the response had no Access-Control-Allow-Origin that matched. MDN documents the header. The failure is in the browser console, while the server may still have processed the request. A wildcard origin plus credentials is not allowed. Pointing the frontend at a new domain without updating the API's allow list is the usual launch-day version.
Fix
- Read the two origins in the console line: the page, and the API. They differ in scheme, host, or port.
- Prefer same-origin. Call a route on your own host and let that route talk to the third party. The browser then does not need CORS for the secret call.
- If the browser must call the other origin, set Access-Control-Allow-Origin to your exact site origin on that API. Do not use * if the request sends cookies.
- For a preflight, answer OPTIONS with the allowed methods and headers. A missing OPTIONS route looks like the same console error.
- Do not turn off CORS in the browser as a fix. That setting will not exist for your users.
Prompt
Fix prompt
The browser blocks fetch with "No 'Access-Control-Allow-Origin' header is present". If both apps are mine, either serve them on one origin or echo the specific site origin from the API and handle OPTIONS. Do not use Access-Control-Allow-Origin: * together with credentials. If the API is a third party, call it from my server route so the secret and the CORS problem stay off the browser. Show me the request URL and the header you changed. Do not weaken authentication to get past CORS.
Questions
The API works in curl and fails in the browser. Why?
curl does not enforce CORS. The browser does, for JavaScript. The request may even have reached the server. The page is not allowed to read the response.
Can I set the header in the frontend?
No. The response header has to come from the API origin. The frontend cannot grant itself access.
I added the header and it still fails. What should I check?
The origin string must match exactly, including https and no trailing slash mismatch. Also check the OPTIONS response. A successful GET header does not fix a failed preflight.