[解決済み] Uncaught (in promise) TypeError: フェッチに失敗してCorsエラー

質問

データベースからデータを取り戻すのに問題があります。私は問題を説明するために最善を尽くしています。

1.下記のコードの中で、"mode":"no-cors" を残すと、Postmanでサーバーからデータを取り戻すことができますが、自分のサーバーからではできません。クライアント側のエラーと思われます。

1. mode":"no-cors" を削除すると、2つのエラーが表示されます。 -Fetch APIはロードできません。 http://localhost:3000/ . リクエストヘッダーフィールドaccess-control-allow-originは、プリフライトレスポンスのAccess-Control-Allow-Headersで許可されていません。 -Uncaught (in promise) TypeError: フェッチに失敗しました

クイックブラウジングでは、quot;mode":"no-cors" を入れることでこのエラーを修正することを提案しましたが、それは正しいこととは思えません。

そこで、どなたかこの問題にアプローチする方法をご存知の方がいらっしゃればと思いました。

本当に私が十分に明確であったことを願っていますが、ここで明確な説明を与えていないことは確かです :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);
    });
}

解決方法は？

追加 mode:'no-cors' をリクエストヘッダに追加することで、 レスポンスがないことが保証されます。

非標準のヘッダーを追加する。 'access-control-allow-origin' はOPTIONSプリフライトリクエストを引き起こし、POSTリクエストを送信するためには、サーバーが正しく処理する必要があります。

また fetch が間違っている ... fetch に対する "promise"を返します。 Response のプロミスクリエイターを持つオブジェクトです。 json , text など、コンテンツの種類に応じて...

つまり、サーバー側でCORSが正しく処理されている場合（コメントからすると処理されているようです）、次のように動作するはずです。

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

しかし、このコードは JSON にはあまり興味がないので (結局はオブジェクトを文字列化するわけですから)、次のようにする方が簡単です。

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