Access to fetch at from origin 'http://localhost:3000' has been blocked by CORS policy

11
votes

Adding to the database shows the error. what should I do?

Access to fetch at 'http:xxx' from origin 'http://localhost:3000' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

my function:

  addItem = (e) => {
e.preventDefault();
const ob = {
  X: 53.0331258,
  Y: 18.7155611,
}
fetch("http://xxx", {
  method: "post",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(ob)
})
  .then(res => res.json())
  .then(res => {
    console.log(res);
  })

}

4
javascriptreactjs
when you trying to make request from different domain (xxx in your case)the browser not allow to send such request. if xxx is your server - you can configure it to send the headers that allows cros domain request – happyZZR1400
It actually tells you what the issue is. See stackoverflow.com/a/10636765/12989672 – Jonathan Rosa
Does this answer your question? How does Access-Control-Allow-Origin header work? – Heretic Monkey
I thought localhost was now granted an exception from CORS restrictions on modern browsers including Chrome. You are pulling in your HTML directly from a web server and not from a local source file are you? – selbie

4 Answers

5
votes

try using ''no-cors' mode.

fetch('http://localhost:8080/example', {
            mode: 'no-cors',
            method: "post",
            headers: {
                 "Content-Type": "application/json"
            },
            body: JSON.stringify(ob)
 })
4
votes

Your server should respond with a response that looks like below 

Access-Control-Allow-Origin: https://localhost:3000

Untill you are able to configure that as a workaround you can install the below chrome extension to resume your testing

https://chrome.google.com/webstore/detail/who-cors/hnlimanpjeeomjnpdglldcnpkppmndbp?hl=en-GB

But the above is only a workaround to continue development

I would suggest you read this article for understanding CORS https://javascript.info/fetch-crossorigin

1
votes

For browser CORS is enabled by default and you need to tell the Browser it's ok for send a request to server that not served your client-side app ( static files ).

if you use RestFul API with node and express add this middleware to your file

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*")
})
0
votes

The middleware should be like this.

app.use((req, res, next) => {
  res.header({"Access-Control-Allow-Origin": "*"});
  next();
})