chrome · JavaScript
The message
Access to fetch at 'https://api.example.com/data' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
What it means
The request reached the server and a response came back, but that response carried no header allowing this origin, so the browser refused to hand it to your JavaScript. Only browsers enforce this rule, which is why the same URL works from curl — it looks as though the server is fine and only the browser is broken. The fix always lives on the server: add Access-Control-Allow-Origin: http://localhost:3000 to the response. There is nothing the front end can do, and if the server is not yours, proxying the call through your own is the only route. Allow-Origin: * does not work for requests that send cookies; those need the exact origin plus Allow-Credentials.
The fix
curl -I -H "Origin: http://localhost:3000" https://api.example.com/data- Printed by
- chrome
- JavaScript
- 15
Browser and Node errors usually tell you what broke and not why the value became what it was — you read undefined, it was not a function, it was not JSON — so the place to fix is upstream of the line that threw, and silencing just that line with ?. and default values makes the same problem reappear further away in a form that is harder to recognise.
Reading an error message
- Read from the first line down. The lower you go the more it is about the tool’s internals; the cause is usually at the top.
- If there is a file and a line number, start there — not the top stack frame, but the topmost line that names a file you wrote.
- Search the message verbatim, but strip your own paths and variable names first; those are what stop the search from matching.
- The same condition is worded differently across tool versions. If results look wrong, add the version number to the query.
- Before pasting a fix, check what it throws away. Some of these cannot be undone.
Common questions
Q. What does “Access to fetch at 'https://api.example.com/data' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.” mean?
The request reached the server and a response came back, but that response carried no header allowing this origin, so the browser refused to hand it to your JavaScript. Only browsers enforce this rule, which is why the same URL works from curl — it looks as though the server is fine and only the browser is broken. The fix always lives on the server: add Access-Control-Allow-Origin: http://localhost:3000 to the response. There is nothing the front end can do, and if the server is not yours, proxying the call through your own is the only route. Allow-Origin: * does not work for requests that send cookies; those need the exact origin plus Allow-Credentials.
Q. How do I fix it?
curl -I -H "Origin: http://localhost:3000" https://api.example.com/data — before running it, check the explanation above for what this command discards.
Q. Which tool prints this?
chrome. It sits under JavaScript, and the message runs to 23 words.