Frage Warum erhält mein JavaScript bei der angeforderten Ressource einen Fehler "Kein Zugriff-Steuerelement-Zulassen-Ursprung", wenn Postman dies nicht tut?


Ich versuche die Autorisierung mit zu machen JavaScript durch Verbindung mit dem RESTful  API eingebaut Flasche. Wenn ich die Anfrage mache, erhalte ich den folgenden Fehler:

XMLHttpRequest kann nicht geladen werden http: // myApiUrl / Anmeldung. Kein 'Access-Control-Allow-Origin'-Header ist auf der angeforderten Ressource vorhanden. Origin 'null' ist daher nicht erlaubt.

Ich weiß, dass die API oder Remote-Ressource die Kopfzeile festlegen muss, aber warum funktionierte es, wenn ich die Anfrage über die Chrome-Erweiterung getätigt habe Briefträger?

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

1859
2017-11-17 19:29


Ursprung


Antworten:


Wenn ich es richtig verstanden habe, machst du ein XMLHttpRequest zu einer anderen Domain als Ihre Seite ist. Der Browser blockiert es also, da es aus Sicherheitsgründen normalerweise eine Anfrage im selben Ursprung erlaubt. Sie müssen etwas anderes tun, wenn Sie eine domänenübergreifende Anfrage durchführen möchten. Ein Tutorial, wie das zu erreichen ist Verwenden von CORS.

Wenn Sie Postbote verwenden, sind sie nicht durch diese Richtlinie eingeschränkt. Zitiert aus Herkunftsübergreifende XMLHttpRequest:

Normale Webseiten können das XMLHttpRequest-Objekt verwenden, um Daten von Remoteservern zu senden und zu empfangen, sie sind jedoch durch die gleiche Ursprungsrichtlinie eingeschränkt. Erweiterungen sind nicht so begrenzt. Eine Erweiterung kann mit Remote-Servern außerhalb ihres Ursprungs kommunizieren, solange sie zuerst die ursprungsübergreifenden Berechtigungen anfordert.


998
2017-11-17 19:49



Dies ist kein Fix für die Produktion oder wenn dem Client eine Anwendung angezeigt werden soll, ist dies nur hilfreich bei UI und Backend Entwicklung  sind unterschiedlich Server und in der Produktion sind sie tatsächlich auf demselben Server. Beispiel: Bei der Entwicklung von UI für eine Anwendung, wenn diese lokal getestet werden muss, um sie auf den Backend-Server zu verweisen, ist dies in diesem Szenario die perfekte Lösung. Für eine Produktionsreparatur müssen CORS-Header zum Backend-Server hinzugefügt werden, um den Cross-Origin-Zugriff zu ermöglichen.

Der einfache Weg ist, einfach die Erweiterung in Google Chrome hinzuzufügen, um den Zugriff mit CORS zu ermöglichen.

(https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en-US)

Aktivieren Sie diese Erweiterung nur, wenn Sie den Zugriff auf "Nein" zulassen möchten 'Zugriffskontrolle-Zulassen-Ursprung' Header-Anfrage.

Oder 

In Windows fügen Sie diesen Befehl in ein Lauf Fenster

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

Dies wird ein neues öffnen Chrom Browser, die den Zugriff auf keine erlauben 'Zugriffskontrolle-Zulassen-Ursprung' Header-Anfrage.


451
2018-03-04 06:42



Wenn Sie damit umgehen können JSON im Gegenzug, dann versuchen Sie es mit JSONP (beachten Sie das P am Ende) für das Sprechen zwischen den Domänen:

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

Erfahren Sie mehr über die Arbeit mit JSONP Hier:

Das Aufkommen von JSONP - im Wesentlichen ein konsensueller Cross-Site-Scripting-Hack - hat die Tür zu mächtigen Mashups von Inhalten geöffnet. Viele prominente Websites stellen JSONP-Dienste bereit, die Ihnen den Zugriff auf ihre Inhalte über eine vordefinierte API ermöglichen.


311
2018-02-22 00:42



Es ist sehr einfach zu lösen, wenn Sie verwenden PHP. Fügen Sie am Anfang Ihrer PHP-Seite das folgende Skript hinzu, das die Anfrage bearbeitet:

<?php header('Access-Control-Allow-Origin: *'); ?>

Warnung: Dies enthält ein Sicherheitsproblem für Ihre PHP-Datei, das von Angreifern aufgerufen werden könnte. Sie müssen Sitzungen und Cookies zur Authentifizierung verwenden, um Ihre Datei / Ihren Dienst gegen diesen Angriff zu schützen. Ihr Dienst ist anfällig für Cross-Site-Anfrage Fälschung (CSRF).

Wenn Sie verwenden Knotenrot Sie müssen CORS in der erlauben node-red/settings.js Datei durch Unkommentieren der folgenden Zeilen:

// The following property can be used to configure cross-origin resource sharing
// in the HTTP nodes.
// See https://github.com/troygoode/node-cors#configuration-options for
// details on its contents. The following is a basic permissive set of options:
httpNodeCors: {
 origin: "*",
 methods: "GET,PUT,POST,DELETE"
},

186
2017-12-03 20:24



Ich wünschte, jemand hätte diese Seite schon lange mit mir geteilt http://cors.io/ es hätte viel Zeit gespart, verglichen mit dem Aufbau und dem Vertrauen auf meinen eigenen Proxy. Wenn Sie jedoch in die Produktion wechseln, ist es am besten, einen eigenen Proxy zu haben, da Sie immer noch alle Aspekte Ihrer Daten kontrollieren.

Alles was du brauchst:

https://cors.io/?http://HTTP_YOUR_LINK_HERE


142
2017-07-21 22:08



Es gibt ein domänenübergreifendes Problem mit Ajax. Sie müssen darauf achten, dass Sie auf Ihre Dateien zugreifen http:// Weg ohne www. (oder Zugriff von http://www. und post auf den gleichen Pfad einschließlich www.), die der Browser beim Zugriff über eine www. Pfad, so sehen Sie, wo das Problem liegt. Sie posten in einer anderen Domäne und der Browser blockiert den Datenfluss aufgrund des Ursprungsproblems.

Wenn die API ist nicht auf demselben Host platziert, von dem Sie anfragen, der Fluss ist blockiert und Sie müssen einen anderen Weg finden, um mit der API zu kommunizieren.


61
2018-03-12 08:53



Wenn Sie verwenden Node.js, Versuch es:

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

Mehr Informationen: CORS auf ExpressJS


55
2018-02-12 16:27