Warum erhält mein JavaScript-Code einen "No 'Access-Control-Allow-Origin' Header ist auf der angeforderten Ressource vorhanden" Fehler, wenn Postman dies nicht tut?

Ich versuche, die Autorisierung mit JavaScript durchzuführen, indem ich mich mit der in Flask integrierten RESTful API verbinde. Wenn ich die Anforderung stelle, erhalte ich jedoch den folgenden Fehler:

XMLHttpRequest kann nicht laden http://myApiUrl/login. Kein 'Access-Control-Allow-Origin' Header ist für die angeforderte Ressource vorhanden. Origin 'null' ist daher kein Zugriff erlaubt.

Ich weiß, dass die API oder die Remote-Ressource den Header setzen muss, aber warum hat es funktioniert, als ich die Anfrage über die Chrome-Erweiterung Postman gestellt habe?

Dies ist der Anforderungscode:

$.ajax({
    type: "POST",
    dataType: 'text',
    url: api,
    username: 'user',
    password: 'pass',
    crossDomain : true,
    xhrFields: {
        withCredentials: true
    }
})
    .done(function( data ) {
        console.log("done");
    })
    .fail( function(xhr, textStatus, errorThrown) {
        alert(xhr.responseText);
        alert(textStatus);
    });
shady sherif
Bearbeitete Frage 27. Oktober 2019 в 12:06
Programmierung
javascript jquery cors same-origin-policy flask-restless
17. November 2013 в 7:29
14 Aufrufe
Lösung

Wenn ich es richtig verstanden habe, führen Sie eine XMLHttpRequest an eine andere Domäne als die Ihrer Seite aus. Der Browser blockiert diese Anfrage, da er normalerweise aus Sicherheitsgründen eine Anfrage mit demselben Ursprung zulässt. Sie müssen etwas anderes tun, wenn Sie eine domänenübergreifende Anfrage stellen wollen. Ein Tutorial darüber, wie man das erreicht, ist Using CORS.

Wenn Sie postman verwenden, werden sie durch diese Richtlinie nicht eingeschränkt. Zitiert aus Cross-Origin XMLHttpRequest:

Normale Webseiten können das XMLHttpRequest-Objekt verwenden, um Daten von entfernten Servern zu senden und zu empfangen, aber sie sind durch dieselbe Herkunftsrichtlinie eingeschränkt. Erweiterungen sind nicht so eingeschränkt. Eine Erweiterung kann mit entfernten Servern außerhalb ihres Ursprungs kommunizieren, solange sie zuerst herkunftsübergreifende Berechtigungen anfordert.

Peter Mortensen
Bearbeitete Antwort 23. Januar 2014 в 12:46
Kommentare (15)

Wenn Sie im Gegenzug mit JSON zurechtkommen, dann versuchen Sie es mit JSONP (beachten Sie das P am Ende), um zwischen den Domänen zu sprechen:

$.ajax({
  type: "POST",
  dataType: 'jsonp',
  ...... etc ......

Erfahren Sie mehr über die Arbeit mit JSONP hier:

Das Aufkommen von JSONP - im Wesentlichen ein einvernehmlicher Cross-Site-Scripting-Hack - hat die Tür zu leistungsstarken Mashups von Inhalten geöffnet. Viele bekannte Websites bieten JSONP-Dienste an, die Ihnen den Zugriff auf ihre Inhalte über eine vordefinierte API ermöglichen.

Hristiyan Dodov
Bearbeitete Antwort 13. Juli 2017 в 6:14
Kommentare (9)

Es gibt ein domänenübergreifendes Problem bei der Verwendung von Ajax. Sie müssen sicher sein, dass Sie auf Ihre Dateien unter demselben http://-Pfad ohne www. zugreifen (oder von http://www. aus zugreifen und auf denselben Pfad einschließlich www. posten), den der Browser als eine andere Domäne betrachtet, wenn er über einen www.-Pfad zugreift, damit Sie sehen, wo das Problem liegt. Sie senden an eine andere Domäne und der Browser blockiert den Datenfluss aufgrund des Ursprungsproblems.

Wenn sich die API nicht auf demselben Host befindet, von dem aus Sie die Anfrage stellen, wird der Datenfluss blockiert, und Sie müssen einen anderen Weg finden, um mit der API zu kommunizieren.

Alin Razvan
Bearbeitete Antwort 2. April 2015 в 9:31
Kommentare (1)