ShareYourGroupShareYourGroupError Explainer

JavaScript fetch blocked by CORS policy

A plain-words explanation of this JavaScript message: what it means, the usual causes, and the steps that fix it.

The messageAccess to fetch at 'http://127.0.0.1:9282/data.json' from origin 'http://127.0.0.1:9281' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Make the error yourself

Run in Google Chrome 157.0.8103.51. This is the smallest example we could find that shows it.

JavaScript (in a script tag)

fetch("http://127.0.0.1:9282/data.json")
  .then(r => r.json())
  .then(d => console.log(d));

Browser console (the real message)

Access to fetch at 'http://127.0.0.1:9282/data.json' from origin 'http://127.0.0.1:9281' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Failed to load resource: net::ERR_FAILED
TypeError: Failed to fetch

Why it happens

Browsers stop a page from reading a response from another origin (a different scheme, host or port) unless that server says it is allowed, by sending an Access-Control-Allow-Origin header. The page here is on port 9281 and the data is on port 9282, and the second server sends no such header, so the browser throws the response away and prints this message. The server did answer; the browser refused to give the answer to your script. Note that the rule is a browser rule: the same request works in curl or Postman.

The red error often comes with "net::ERR_FAILED" and then "TypeError: Failed to fetch", which are the same event seen from the network side.

How to fix it

  1. If you own the server, send the header: Access-Control-Allow-Origin: https://your-site.example (or * for public data) and answer the preflight OPTIONS request when you send custom headers or methods.
  2. If you do not own the server, call your own server (or a serverless function) from the page and let it call the other one. Servers are not bound by CORS.
  3. Keep the page and the API on the same origin, as in the fixed example, which asks for a file from the same server.
  4. Do not "fix" it with a browser extension that turns CORS off: it only works on your own computer, and it hides real problems.
  5. Check that the address is correct. A wrong address that redirects can also lose the header.

The corrected version

JavaScript (in a script tag)

fetch("/page.json")
  .then(r => r.json())
  .then(d => console.log(d.ok));

Browser console (the corrected version)

true

How to avoid it

Decide early which origins may call your API and set the headers in one place. For public data, an open * rule on GET requests is fine.

Questions

Why does Postman work but the browser does not?

CORS is checked only by browsers, to protect users. Other tools do not apply it.

This is an independent guide. It is not connected with Python, Microsoft, Google, GitHub or the Git project. Product names belong to their owners. Examples were run on 13 November 2026 in a practice folder or a blank workbook; your version may word a message slightly differently.