close

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

Hello Guys, How are you all? Hope You all Are Fine. Today I get the following error Uncaught (in promise) TypeError: Failed to fetch and Cors error in javascript. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

How Uncaught (in promise) TypeError: Failed to fetch and Cors error Error Occurs?

Today I get the following error Uncaught (in promise) TypeError: Failed to fetch and Cors error in javascript.

How To Solve Uncaught (in promise) TypeError: Failed to fetch and Cors error Error ?

  1. How To Solve Uncaught (in promise) TypeError: Failed to fetch and Cors error Error ?

    To Solve Uncaught (in promise) TypeError: Failed to fetch and Cors error Error In my case, the problem was the protocol. I was trying to call a script url with http instead of https.

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

    To Solve Uncaught (in promise) TypeError: Failed to fetch and Cors error Error In my case, the problem was the protocol. I was trying to call a script url with http instead of https.

Solution 1

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 jsontext, 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;
    });
}

Solution 2

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

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also Read

Leave a Comment