wake-up-neo.net

Nicht erfasst (Versprechen) TypeError: Fehler beim Abrufen und Fehler

ein Problem mit dem Abrufen von Daten aus der Datenbank hat. Ich versuche mein Bestes, um das Problem zu erklären.

1.Wenn ich "mode": "no-cors" im nachstehenden Code verlasse, kann ich mit Postman Daten vom Server zurückholen, jedoch nicht von meinem eigenen Server. Ich denke, es muss mein Fehler auf der Clientseite sein

  1. Wenn ich "mode": "no-cors" entferne, erhalte ich 2 Fehler: - Fetch-API kann http: // localhost: 3000/ nicht laden. Zugriffskontrollfeld "Zugriffskontrolle zulassen" ist in der Preflight-Antwort von Access-Control-Zulassen-Kopfzeilen nicht zulässig

Schnelles Durchsuchen schlug vor, in den "Modus" zu setzen: "no-cors", was diesen Fehler behoben hat, aber es fühlt sich nicht richtig an.

Ich dachte mir, vielleicht hat jemand einen Vorschlag, wie man dieses Problem angehen könnte.

Ich hoffe wirklich, dass ich klar genug war, aber ich bin mir ziemlich sicher, dass ich hier keine klare Erklärung gebe: 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);
    });
}
15
OFFLlNE

Durch das Hinzufügen von mode:'no-cors' zum Anforderungsheader wird sichergestellt, dass in der Antwort keine Antwort verfügbar ist

Wenn Sie einen "Nicht-Standard" -Header hinzufügen, wird Zeile 'access-control-allow-Origin' eine OPTIONS-Preflight-Anfrage auslösen, die Ihr Server korrekt verarbeiten muss, damit die Anforderung POST überhaupt gesendet wird

Sie machen auch fetch falsch ... fetch gibt ein "Versprechen" für ein Response-Objekt zurück, das Versprecher-Ersteller für json, text usw. hat, abhängig vom Inhaltstyp ... 

Kurz gesagt, wenn Ihre Serverseite CORS korrekt behandelt (was aus Ihrem Kommentar hervorgeht, dass dies der Fall ist), sollte Folgendes funktionieren

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

da Ihr Code jedoch nicht wirklich an JSON interessiert ist (er fügt das Objekt schließlich ein), ist es einfacher

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

In mozilla.org's Artikel erfahren Sie, wie CORS funktioniert. 

Sie benötigen Ihren Server, um die richtigen Antwortheader zurückzusenden, etwa:

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

Beachten Sie, dass Sie "*" für Access-Control-Allow-Origin verwenden können. Dies funktioniert nur, wenn Sie versuchen, Authentifizierungsdaten zu übergeben. In diesem Fall müssen Sie die Origin-Domänen explizit auflisten, die Sie zulassen möchten. Um mehrere Domänen zuzulassen, siehe this post .

1
Dave Cole

sie können Lösungen verwenden, ohne "Access-Control-Allow-Origin" hinzuzufügen: "*". Wenn Ihr Server bereits ein Proxy-Gateway verwendet, tritt dieses Problem nicht auf, da das Frontend und das Backend auf der Clientseite in derselben IP und demselben Port geleitet werden Für die Entwicklung benötigen Sie jedoch eine dieser drei Lösungen, wenn Sie keinen zusätzlichen Code benötigen 1 simulieren Sie die reale Umgebung mithilfe eines Proxyservers und konfigurieren Sie Front- und Back-End-Port auf demselben Port

2- Wenn Sie Chrome verwenden, können Sie die Erweiterung Allow-Control-Allow-Origin: * verwenden. Sie hilft Ihnen dabei, dieses Problem zu vermeiden

3- Sie können den Code verwenden, aber einige Browserversionen unterstützen dies möglicherweise nicht. Versuchen Sie daher, eine der vorherigen Lösungen zu verwenden

die beste Lösung besteht darin, einen Proxy wie ngnix zu verwenden, der einfach zu konfigurieren ist und die reale Situation der Produktionsbereitstellung simuliert 

0
3alaa baiomy