Access to XMLHttpRequest at '...' from origin 'http://...' has been blocked by CORS policy

Question

So my problem is:

Whenever I try to make an XMLHttpRequest to my HTTP server from my web page (same machine, different port), I get blocked with this error:

Access to XMLHttpRequest at 'localhost:8081' from origin 'http://localhost:8080' has been blocked by CORS policy:
Cross-origin requests are only supported for protocol schemes: HTTP, data, chrome, chrome-extension, brave, chrome-untrusted, HTTPS.

Why does this happen?

Sample client (Browser):

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    // Use data...
};
xhttp.open("GET", "localhost:8081", true);
xhttp.send();

Sample server (NodeJS, HTTP library):

const server = http.createServer((req, res) => {
  if(req.url != '/') return res.end('404');
  res.writeHead(200, {
    'Content-Type': 'text/html'
  })

  const json = {
    // Data...
  }

  res.write(JSON.stringify(json))
  res.end()
});

server.listen(8081)

Solved, thanks to Quentin in the comments :D

Enrich

Typo: You forgot the http:// bit of the URL. – Eddington

Of course, fixing that will give you a more regular CORS error, but you'd done nothing to support it in the server anyway. – Eddington

see https://mcmap.net/q/56283/-xmlhttprequest-cannot-load-xxx-no-39-access-control-allow-origin-39-header – Eddington

Unrelated to the issue at hand, but 'Content-Type': 'text/html' and res.write(JSON.stringify(json)) really doesn't make sense. JSON is not HTML. – Eddington

Answer 1

The answer is here.

It's a problem with the privacy of your browser and there are two ways that you could fix it:

1. Allowing requests from everywhere on your browser
2. Put controllers inside the header access control information.

The entire answer is on the link above

Adenectomy

Answer 2

I was facing this issue: Access to XMLHttpRequest at "Node.js server URL" from origin "React app URL" has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I resolved this issue by adding below lines of code in my index.js(main server file):

app.use((req, res, next) => {
  res.header(
    "Access-Control-Allow-Origin",
    "React app URL"
  );
  res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
  res.header("Access-Control-Allow-Headers", "Content-Type");
  next();
});

Alisonalissa

Answer 3

when you start working with a full stack application. but basically, all that it means is that our front-end and back-end are running on different origins(ports).and therefore they (back-end/front-end) are not allowed to talk each other .. Order to fix this error, it just go into your front-end ./root open ./root folder up the package.json file and you can add to another key:value to

"proxy":"http://localhost:8080/"

just adding proxy in pakage.json file

Demarche

Isn’t this entirely specific to create-react-app? – Freed