Fehler erhalten Nein Die 'Access-Control-Allow-Origin'-Kopfzeile ist auf der angeforderten Ressource vorhanden

Question

Ich versuche eine kopflose Drupal-App zu erstellen. Ich benutze Drupal 8 als Beckend und reagiere als Front-End. Ich habe REST-Dienste in Drupal 8 mit Core Rest Services-Modul erstellt. das Problem ist, wenn ich die API nenne, gibt es mir Fehler, d. h.

Fetch API kann http://192.168.1.246/headless-react/api/events nicht laden. Die Antwort auf die Preflight-Anforderung übergibt die Zugriffskontrollprüfung nicht: Auf der angeforderten Ressource ist kein Header "Access-Control-Allow-Origin" vorhanden. Origin 'http://localhost:3000' ist daher nicht erlaubt. Die Antwort hatte den HTTP-Statuscode 403. Wenn eine undurchsichtige Antwort Ihren Anforderungen entspricht, setzen Sie den Modus der Anfrage auf 'no-cors', um die Ressource mit deaktiviertem CORS zu holen.

Ich habe die Datei services.yml für cors.config konfiguriert, bekomme aber immer noch Fehler. kann jemand eine Idee haben, wie man es löst? Danke

Answer 1

Ich benutze Erweiterung für sie. Der Grund, warum Sie diese Warnung erhalten, weil Sie API aus einer anderen Domäne aufgerufen haben. Oder du kannst nginx benutzen.

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

Answer 2

Sie müssen erwähnen, was Build-Tools sind Sie in Ihrem Frontend verwendet, die ReactJS verwendet. Unter der Annahme, dass Sie webpack verwenden, benötigen Sie einen Proxy in der package.json im Stammverzeichnis hinzufügen, etwa so:

package.json

... 
"name": "relay-starter-kit", 
"proxy":"<your-base-remote-server-url-here", 
"private": true, 
... 

Zum Beispiel, wenn Ihr Server bei https://www.myawesomeserver.com, dann "proxy": "https://www.myawesomeserver.com".

In Ihrem Fall, "proxy":"http://192.168.1.246", sollte funktionieren.

in Ihrer Anwendung, wenn Sie die Route zugreifen müssen, https://www.myawesomeserver.com/home, dann müssen Sie nur die Strecke und webpack passieren die Basis-URL von Proxy in package.json Eine Anfrage nach Hause aussehen wird abholen,

const getHome = async() => { 
    try{ 
    const raw = await fetch('/home') 
    const res = await raw.json() 
    } catch(e) { 
    console.log(e) 
} 
} 

Dies liegt daran, dass beim Ausführen von webpack die react-App auf dem Webpack-dev-Server ausgeführt wird und Sie für die Kommunikation mit einem anderen Server eine Anfrage in Ihrem Namen stellen müssen. Wenn Sie kein Webpack verwenden, ist dies möglicherweise für Sie nicht nützlich.