Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Uncaught (in promise) TypeError: Failed to fetch and Cors error

having a problem with getting data back from database. I am trying my best to explain the problem.

1.If I leave "mode":"no-cors" inside the code below, then I can get data back from server with Postman, but not with from my own server. Thinking it has to be my client side error

  1. When I remove "mode":"no-cors" then I am getting 2 errors: -Fetch API cannot load http://localhost:3000/. Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response. -Uncaught (in promise) TypeError: Failed to fetch

Quick Browsing suggested to put in the "mode":"no-cors" which fixed this error, but it does not feel right thing to do.

So I thought maybe somebody has a suggestion how to approach this problem.

Really hope I was clear enough, but pretty sure I am not giving 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);     }); } 
like image 318
OFFLlNE Avatar asked Mar 12 '17 23:03

OFFLlNE


People also ask

What is failed fetch error?

When you see an error saying "Failed to fetch" or get an ICE error this means that there is a connectivity issue between you and Lookback. Typically this is related to a firewall blocking your connection in some way.

How do you set the request mode to no Cors?

how do you set set the request's mode to 'no-cors' to fetch the resource with CORS disabled. Access to fetch set the request's mode to 'no-cors' to fetch the resource with CORS disabled. javascript set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

How define fetch in JavaScript?

The fetch() method in JavaScript is used to request to the server and load the information on the webpages. The request can be of any APIs that return the data of the format JSON or XML. This method returns a promise.


1 Answers

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

Adding a "non standard" header, line 'access-control-allow-origin' will trigger a OPTIONS preflight request, which your server must handle correctly in order for the POST request to even be sent

You're also doing fetch wrong ... fetch returns a "promise" for a Response object which has promise creators for json, text, etc. depending on the content type...

In short, if your server side handles CORS correctly (which from your comment suggests it does) 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 isn't really interested in JSON (it stringifies the object after all) - it's simpler 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;     }); } 
like image 94
Jaromanda X Avatar answered Sep 21 '22 09:09

Jaromanda X