web-dev-qa-db-ja.com

未取得（約束）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：Failed to fetch

クイックブラウジングでは、このエラーを修正した「モード」：「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);
    });
}
javascriptnode.jscors
15
OFFLlNE

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

「非標準」ヘッダー、行'access-control-allow-Origin'を追加すると、OPTIONSプリフライトリクエストがトリガーされます。サーバーは、POSTリクエストを送信するためにもサーバーが正しく処理する必要があります

また、fetch wrong ... fetchは、Response、jsonなどのプロミス作成者がいるtextオブジェクトの「promise」を返します。 。コンテンツタイプに応じて...

要するに、サーバー側が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;
    });
}
7
Jaromanda X

CORSの仕組みについては mozilla.orgの記事 をご覧ください。

サーバーには、次のような適切な応答ヘッダーを送り返す必要があります。

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

認証データを渡そうとしている場合にのみ機能する"*"にAccess-Control-Allow-Originを使用できることに注意してください。その場合、許可するOriginドメインを明示的にリストする必要があります。複数のドメインを許可するには、 this post をご覧ください。

1
Dave Cole

「Access-Control-Allow-Origin」：「*」を追加せずにソリューションを使用できます。サーバーがすでにプロキシゲートウェイを使用している場合、フロントエンドとバックエンドがクライアント側の同じIPとポートでルーティングされるため、この問題は発生しませんただし、追加のコードが必要ない場合は、開発のためにこの3つのソリューションのいずれかが必要です1-プロキシサーバーを使用して実際の環境をシミュレートし、同じポートでフロントエンドとバックエンドを構成します

2- Chromeを使用している場合、Allow-Control-Allow-Originと呼ばれる拡張機能を使用できます：*この問題を回避するのに役立ちます

3-コードを使用できますが、一部のブラウザーバージョンではサポートされていない可能性があるため、以前のソリューションのいずれかを使用してください

最良の解決策は ngnix のようなプロキシを使用することです。設定は簡単で、実稼働展開の実際の状況をシミュレートします

0
3alaa baiomy