29

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);
        })
}
Mohi
  • 1,063
  • 2
  • 16
  • 21
dcielak
  • 415
  • 1
  • 4
  • 8
  • 1
    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 Apr 15 '20 at 21:14
  • It actually tells you what the issue is. See https://stackoverflow.com/a/10636765/12989672 – Jonathan Rosa Apr 15 '20 at 21:14
  • Does this answer your question? [How does Access-Control-Allow-Origin header work?](https://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work) – Heretic Monkey Apr 15 '20 at 21:15
  • 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 Apr 15 '20 at 21:22

7 Answers7

14

try using ''no-cors' mode.

fetch('http://localhost:8080/example', {
            mode: 'no-cors',
            method: "post",
            headers: {
                 "Content-Type": "application/json"
            },
            body: JSON.stringify(ob)
 })
Thej
  • 151
  • 1
  • 6
  • 2
    What would be the point of a security system with a button saying "disable me" on the outside? See [Trying to use fetch and pass in mode: no-cors](https://stackoverflow.com/questions/43262121/trying-to-use-fetch-and-pass-in-mode-no-cors/43268098) — `{ mode: 'no-cors' }` makes things *worse*. – K.K Desgins Feb 09 '22 at 05:33
4

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

gandharv garg
  • 841
  • 7
  • 15
2

I resolved the issue by installing the cors node module and adding this on the requested server

const cors = require("cors");
app.use(cors());
M.S
  • 91
  • 1
  • 5
1

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", "*")
})
General Grievance
  • 4,259
  • 21
  • 28
  • 43
ABDERRAHMANE OUALI
  • 524
  • 3
  • 11
1

You must install cors.

npm install cors

inside the main scripts index.js or app.js

const cors = require("cors");
app.use(cors());
Ahmed Elgammudi
  • 524
  • 5
  • 13
0

The middleware should be like this.

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

const cors = require("cors"); app.use(cors());

i use this but can't solve this problem.

app.use((req, res, next) => { res.header({"Access-Control-Allow-Origin": "*"}); next(); }) when use this code than solve this problem

Habibur Rahman
  • 1
  • 1
    Hello Habibur Rahman =) Welcome to StackOverfollow. Im happy to assist you with any queries you may have regarding using this Platform. One thing thats allways a great benifit to others is to add comments to your code sameplates to allow you to reach a loarger audience. That being said, try and formate your code blocks with the ` symbole i.e using it in one line just your code between the backticks `Hollo World!` if you need a larger code block you can surround your block off code with 3 backticks and the begening of the block snd 3 at the end i.e ``` If (this == that) { // computed value } – 0x0147k3r May 08 '22 at 16:48