it-swarm.com.de

Ursprungsheader-Fehler bei der Zugriffskontrolle mithilfe von Axios in React Web-Auslösungsfehler in Chrome

Ich mache einen API-Aufruf mit Axios in einer React-Webanwendung. Allerdings bekomme ich den Fehler in Chrome als,

XMLHttpRequest kann https://example.restdb.io/rest/mock-data nicht laden. Auf der angeforderten Ressource ist kein Header "Access-Control-Allow-Origin" vorhanden. Origin ' http: // localhost: 8080 ' hat daher keinen Zugriff.

    {
      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 zu StackOverflow über das gleiche Thema mit dem Titel "Access-Control-Allow-Origin" gelesen, konnte jedoch noch nicht herausfinden, wie das Problem gelöst werden kann. Ich möchte keine Erweiterung IN Chrome oder einen temporären Hack verwenden, um dieses Problem zu lösen. Bitte schlagen Sie den Standard vor, um das obige Problem zu lösen.

Nachdem ich einige Antworten ausprobiert habe, habe ich es ausprobiert.

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

Jetzt bekomme ich den Fehler als

Das Feld für das Anforderungsheader Access-Control-Allow-Origin ist für Access-Control-Allow-Headers in der Preflight-Antwort nicht zulässig

10
SeaWarrior404

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

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

Wenn nicht, müssen Sie sicherstellen, dass der Server die CORS-Anforderungen verwalten kann.

Dokumentation zu diesem Mechanismus finden Sie hier: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

6
Vlad Povalii

!!! Ich hatte ein ähnliches Problem und fand, dass in meinem Fall die withCredentials: true in der Anfrage aktivierte die CORS-Prüfung, während die Ausgabe derselben im Header die Prüfung verhinderte:

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSMIssingAllowCredentials

verwende nicht withCredentials: true aber set 'Access-Control-Allow-Credentials':true in den Headern

2
AMDP

Wie ich das Problem verstanden habe, wird die Anfrage von localhost: 3000 an localhost: 8080 gesendet und der Browser lehnt solche Anfragen wie CORS ab. Die Lösung bestand also darin, einen Proxy zu erstellen 

Meine Lösung war:

import proxy from 'http-proxy-middleware'
app.use('/api/**', proxy({ target: "http://localhost:8080" }));
0
LvDevR1

Fügen Sie im Knoten js (Backend) diese Zeilen hinzu, um Access-Control-Allow-Origin zu unterstützen.

const express = require('express')
const app = express()
app.use(cors())
0
Parthasarathy S

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

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

0
Chuck-Durst