Ich mache einen API-Aufruf mit Axios in einer React-Web-App. Ich erhalte jedoch diesen Fehler in Chrome:

XMLHttpRequest cannot load
https://example.restdb.io/rest/mock-data. No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:8080' is therefore not allowed
access. 

{
    axios
      .get("https://example.restdb.io/rest/mock-data", {
        headers: {
          "x-apikey": "API_KEY",
        },
        responseType: "json",
      })
      .then((response) => {
        this.setState({ tableData: response.data });
      });
}

Ich habe auch mehrere Antworten auf Stack Overflow zum gleichen Problem mit dem Titel gelesen Access-Control-Allow-Origin konnte aber immer noch nicht herausfinden, wie man das löst. Ich möchte keine Erweiterung in Chrome verwenden oder einen temporären Hack verwenden, um dies zu lösen. Bitte schlagen Sie die Standardmethode zur Lösung des obigen Problems vor.

Nachdem ich einige Antworten ausprobiert habe, habe ich es damit versucht,

headers: { 
  'x-apikey': '59a7ad19f5a9fa0808f11931',
  'Access-Control-Allow-Origin' : '*',
  'Access-Control-Allow-Methods':'GET,PUT,POST,DELETE,PATCH,OPTIONS',
},

Jetzt bekomme ich den Fehler als,

Request header field Access-Control-Allow-Origin is not
allowed by Access-Control-Allow-Headers in preflight response 

Ich werde mich mit diesem komplizierten Thema befassen.

Was ist Ursprung?

Der Ursprung selbst ist der Name eines Hosts (Schema, Hostname und Port), z https://www.google.com oder könnte eine lokal geöffnete Datei sein file:// usw.. Es ist, woher etwas (zB eine Webseite) stammt. Wenn Sie Ihren Webbrowser öffnen und zu gehen https://www.google.comder Ursprung der Webseite, die Ihnen angezeigt wird https://www.google.com. Sie können dies in den Chrome Dev Tools unter sehen Security:

Gleiches gilt, wenn Sie über Ihren Datei-Explorer eine lokale HTML-Datei öffnen (die nicht über einen Server bedient wird):

Was hat das zu tun KOR Ausgaben?

Wenn Sie Ihren Browser öffnen und zu gehen https://website.comdiese Website wird den Ursprung haben https://website.com. Diese Website wird höchstwahrscheinlich nur Bilder, Symbole, js-Dateien abrufen und API-Aufrufe ausführen https://website.comim Grunde ruft es denselben Server auf, von dem es bedient wurde. Es führt Anrufe zum gleichen Ursprung durch.

Wenn Sie Ihren Webbrowser öffnen und eine lokale HTML-Datei öffnen und in dieser HTML-Datei befindet sich Javascript, das beispielsweise eine Anfrage an Google senden möchte, erhalten Sie die folgende Fehlermeldung:

Die Same-Origin-Richtlinie weist den Browser an, Cross-Origin-Anfragen zu blockieren. In diesem Fall Herkunft null versucht, eine Anfrage zu machen https://www.google.com (a Cross-Origin-Anfrage). Der Browser lässt dies aufgrund der festgelegten CORS-Richtlinie nicht zu, und diese Richtlinie besagt, dass Cross-Origin-Anforderungen nicht zulässig sind.

Gleiches gilt, wenn meine Seite von einem Server auf localhost bereitgestellt wurde:

Beispiel für einen Localhost-Server

Wenn wir unseren eigenen localhost-API-Server hosten, der auf localhost:3000 läuft, mit dem folgenden Code:

const express = require('express')
const app = express()
 
app.use(express.static('public'))

app.get('/hello', function (req, res) {
    // res.header("Access-Control-Allow-Origin", "*");
    res.send('Hello World');
})
 
app.listen(3000, () => {
    console.log('alive');
})

Und öffnen Sie eine HTML-Datei (die eine Anfrage an den localhost:3000-Server stellt) aus dem Datei-Explorer. Der folgende Fehler tritt auf:

Da die Webseite nicht vom localhost-Server auf localhost:3000 und über den Datei-Explorer bereitgestellt wurde, ist der Ursprung nicht derselbe wie der Server-API-Ursprung, daher wird eine Cross-Origin-Anfrage versucht. Der Browser stoppt diesen Versuch aufgrund der CORS-Richtlinie.

Aber wenn wir die kommentierte Zeile auskommentieren:

const express = require('express')
const app = express()
 
app.use(express.static('public'))

app.get('/hello', function (req, res) {
    res.header("Access-Control-Allow-Origin", "*");
    res.send('Hello World');
})
 
app.listen(3000, () => {
    console.log('alive');
})

Und jetzt versuchen Sie es erneut:

Es funktioniert, weil der Server, der die HTTP-Antwort sendet, jetzt einen Header enthält, der besagt, dass es in Ordnung ist, dass Cross-Origin-Anfragen an den Server gesendet werden. Dies bedeutet, dass der Browser dies zulässt, daher kein Fehler.

Wie man Dinge repariert (eines der folgenden)

• Stellen Sie die Seite vom selben Ursprung bereit, an dem sich die von Ihnen gestellten Anforderungen befinden (derselbe Host).
• Erlauben Sie dem Server, Cross-Origin-Anfragen zu empfangen, indem Sie dies ausdrücklich in den Antwortheadern angeben.
• Wenn Sie einen Reverse-Proxy wie NGINX verwenden, konfigurieren Sie NGINX so, dass Antwortheader gesendet werden, die CORS zulassen.
• Verwenden Sie keinen Browser. Verwenden Sie zum Beispiel cURL, es kümmert sich nicht um CORS-Richtlinien wie Browser und bekommt das, was Sie wollen.

Beispielablauf

Folgendes ist entnommen aus: https://web.dev/cross-origin-resource-sharing/#how-does-cors-work

Denken Sie daran, dass die Same-Origin-Richtlinie den Browser anweist, Cross-Origin-Anfragen zu blockieren. Wenn Sie eine öffentliche Ressource von einem anderen Ursprung abrufen möchten, muss der Server, der die Ressource bereitstellt, dem Browser mitteilen: „Dieser Ursprung, von dem die Anforderung kommt, kann auf meine Ressource zugreifen“. Der Browser merkt sich das und ermöglicht die ursprungsübergreifende Ressourcenfreigabe.

• Schritt 1: Client-(Browser-)Anfrage Wenn der Browser eine Cross-Origin-Anfrage stellt, fügt der Browser einen Origin-Header mit dem aktuellen Ursprung (Schema, Host und Port) hinzu.

• Schritt 2: Serverantwort Wenn ein Server auf der Serverseite diesen Header sieht und den Zugriff erlauben möchte, muss er der Antwort einen Access-Control-Allow-Origin-Header hinzufügen, der den anfordernden Ursprung angibt (oder *, um jeden Ursprung zuzulassen .)

• Schritt 3: Browser empfängt Antwort Wenn der Browser diese Antwort mit einem entsprechenden Access-Control-Allow-Origin-Header sieht, erlaubt der Browser, dass die Antwortdaten mit der Client-Site geteilt werden.

Weitere Verbindungen

Hier ist eine weitere gute Antwort, die detaillierter beschreibt, was passiert: https://stackoverflow.com/a/10636765/1137669

Wenn Ihr Back-End CORS unterstützt, müssen Sie Ihrer Anfrage wahrscheinlich diesen Header hinzufügen:

headers: {"Access-Control-Allow-Origin": "*"}

[Update] Access-Control-Allow-Origin ist ein Antwortheader. Um CORS zu aktivieren, müssen Sie diesen Header der Antwort Ihres Servers hinzufügen.

Aber für die meisten Fälle wäre die Konfiguration der besseren Lösung Reverse-Proxydamit Ihr Server Anfragen vom Front-End zum Back-End umleiten kann, ohne CORS zu aktivieren.

Die Dokumentation zum CORS-Mechanismus finden Sie hier:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Ich hatte ein ähnliches Problem und fand das in meinem Fall withCredentials: true In der Anfrage wurde die CORS-Prüfung aktiviert, während die Ausgabe derselben im Header die Prüfung vermeiden würde:

Grund: „true“ im CORS-Header „Access-Control-Allow-Credentials“ erwartet

Verwende nicht

withCredentials: true

aber eingestellt

'Access-Control-Allow-Credentials':true

in den Kopfzeilen.

Ich hatte den gleichen Fehler. Ich habe es gelöst, indem ich CORS in meinem Backend installiert habe npm i cors. Sie müssen dies dann zu Ihrem Code hinzufügen:

const cors = require('cors');
app.use(cors());

Das hat es für mich behoben; Jetzt kann ich meine Formulare mit AJAX veröffentlichen, ohne benutzerdefinierte Kopfzeilen hinzufügen zu müssen.

Für Spring Boot – React js-Apps habe ich die Annotation @CrssOrigin auf dem Controller hinzugefügt und es funktioniert:

@CrossOrigin(origins = {"http://localhost:3000"})
@RestController
@RequestMapping("/api")

Aber achten Sie darauf, localhost korrekt hinzuzufügen => ‘http://localhost:3000’, nicht mit “https://stackoverflow.com/” am Ende => ‘http://localhost:3000/’, das war mein Problem.

Die Verwendung des Access-Control-Allow-Origin-Headers für die Anfrage hilft Ihnen in diesem Fall nicht, während dieser Header nur für die Antwort verwendet werden kann …

Damit es funktioniert, sollten Sie diesen Header wahrscheinlich zu Ihrer Antwort hinzufügen. Sie können auch versuchen, den Header hinzuzufügen crossorigin:true zu Ihrer Anfrage.

Zunächst einmal ist CORS definitiv ein serverseitiges Problem und kein clientseitiges Problem, aber ich war mir mehr als sicher, dass der Servercode in meinem Fall korrekt war, da andere Apps denselben Server in verschiedenen Domänen verwendeten. Die Lösung dafür wird in anderen Antworten ausführlicher beschrieben.

Mein Problem begann, als ich anfing zu benutzen axios mit meiner benutzerdefinierten Instanz. In meinem Fall war es ein sehr spezifisches Problem, wenn wir eine baseURL in verwenden axios Beispiel und versuchen Sie dann zu machen GET oder POST Bei Aufrufen von überall fügt axios einen Schrägstrich / zwischen baseURL und Request-URL ein. Das macht auch Sinn, aber es war das versteckte Problem. Mein Laravel-Server leitete um, um den abschließenden Schrägstrich zu entfernen, der dieses Problem verursachte.

Im Allgemeinen der Vorflug OPTIONS Anfrage mag keine Umleitungen. Wenn Ihr Server mit dem Statuscode 301 umleitet, wird er möglicherweise auf verschiedenen Ebenen zwischengespeichert. Überprüfen Sie das also auf jeden Fall und vermeiden Sie es.