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);
})
}
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
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", "*")
})
try using ''no-cors' mode.
fetch('http://localhost:8080/example', {
mode: 'no-cors',
method: "post",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(ob)
})
The middleware should be like this.
app.use((req, res, next) => {
res.header({"Access-Control-Allow-Origin": "*"});
next();
})
I resolved the issue by installing the cors node module and adding this on the requested server
const cors = require("cors");
app.use(cors());
You must install cors.
npm install cors
inside the main scripts index.js or app.js
const cors = require("cors");
app.use(cors());