Unprepared (in promise) TypeError: Cors error failed

Question

There was a problem returning data from the database. I try to explain this problem.

1. If I leave "mode": "no-cors" inside the code below, I can get data from the server using Postman, but not from my own server. I think this should be the mistake of my client side.

2. When I remove the "mode": "no-cors", then I get 2 errors: -Fetch API cannot load http: // localhost: 3000 / . The header request for the access-control-allow-origin field is not allowed by the Access-Control-Allow-Headers headers in the preflight response. -Uncaught (in promise) TypeError: Failed to get

A quick look suggested putting in "mode": "no-cors", which fixed this error, but this is not correct.

So, I thought, maybe someone has a suggestion on how to approach this problem.

I hope I was clear enough, but of course I am not giving a clear explanation here: S

function send(){ var myVar = {"id" : 1}; console.log("tuleb siia", document.getElementById('saada').value); fetch("http://localhost:3000", { method: "POST", headers: { "Access-Control-Allow-Origin": "*", "Content-Type": "text/plain" },//"mode" : "no-cors", body: JSON.stringify(myVar) //body: {"id" : document.getElementById('saada').value} }).then(function(muutuja){ document.getElementById('väljund').innerHTML = JSON.stringify(muutuja); }); } 

Answer 1

Adding mode:'no-cors' to the request header ensures that the response will not be available in the response

When adding a "non-standard" header, the line 'access-control-allow-origin' will cause an OPTIONS pre-check request, which your server must correctly process so that the POST request is even sent

You are also doing the wrong fetch ... fetch returns a "promise" for a Response object that has promise makers for json , text , etc., Depending on the type of content ...

In short, if your server side handles CORS correctly (which from your comment suggests this is the case), then the following should work

 function send(){ var myVar = {"id" : 1}; console.log("tuleb siia", document.getElementById('saada').value); fetch("http://localhost:3000", { method: "POST", headers: { "Content-Type": "text/plain" }, body: JSON.stringify(myVar) }).then(function(response) { return response.json(); }).then(function(muutuja){ document.getElementById('väljund').innerHTML = JSON.stringify(muutuja); }); } 

however, since your code is not really interested in JSON (it's still a string object) - it's easier to do

 function send(){ var myVar = {"id" : 1}; console.log("tuleb siia", document.getElementById('saada').value); fetch("http://localhost:3000", { method: "POST", headers: { "Content-Type": "text/plain" }, body: JSON.stringify(myVar) }).then(function(response) { return response.text(); }).then(function(muutuja){ document.getElementById('väljund').innerHTML = muutuja; }); } 

Answer 2

See mozilla.org for a description of how CORS works.

You will need your server to send the correct response headers, for example:

 Access-Control-Allow-Origin: http://foo.example Access-Control-Allow-Methods: POST, PUT, GET, OPTIONS Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization 

Remember that you can use "*" for Access-Control-Allow-Origin , which will only work if you are trying to pass authentication data. In this case, you need to explicitly specify the source domains that you want to allow. To allow multiple domains, see this post.

Answer 3

you can use solutions without adding "Access-Control-Allow-Origin": "*", if your server already uses a proxy gateway, this problem will not happen, because the front and backend will be routes in the same IP address and on the client side, but for development, you need one of these three solutions if you do not need additional 1- code that simulates a real environment using a proxy server and configures the front and backend in the same port

2-, if you use Chrome, you can use the Allow-Control-Allow-Origin extension: *, this will help you avoid this problem

3- you can use the code, but some versions of browsers may not support this, so try using one of the previous solutions

the best solution uses a proxy server such as ngnix, it is easy to configure, and it will simulate the real situation in a production deployment

Answer 4

In my case, the problem was in the protocol. I tried to call the script url with http instead of https .