Benutzerdefinierte API-Endpunkt-POST-Anforderung von WordPress schlägt in React fehl

Question

Benutzerdefinierte API-Endpunkt-POST-Anforderung von WordPress schlägt in React fehl

stimmen

4

Ich habe ein WordPress-Backend, in dem ich der API meine eigenen benutzerdefinierten Endpunkte hinzugefügt habe:

// retrieve countries
register_rest_route( $namespace, '/countries',
    array(
        'methods'  => 'GET',
        'callback' => array( $this, 'get_countries' ),
    )
);

// check answer
register_rest_route( $namespace, '/check_answer',
    array(
        'methods'  => 'POST',
        'callback' => array( $this, 'check_answer' ),
    )
);

Ich habe meine Umgebung wie folgt eingerichtet: https://example.com ist der Ort, an dem die React-Anwendung lebt, und WordPress befindet sich in einem Unterverzeichnis auf https://example.com/wp

Meine React-Anwendung stellt POST- und GET-Anfragen an die oben genannten Endpunkte. Ich habe eine Produktionsumgebungsvariable, in der ich die Basis-URL des API setze, die lautet (https://example.com/wp/wp-json/game'game' ist mein Namespace) und so kann ich Anfragen mit Axios an https://example.com/wp/wp-json/game/countriesund https://example.com/wp/wp-json/game/check_answerstellen, und hier kommt das Problem.

Mein Server ist so konfiguriert, dass er die React-Anwendung sowohl mit als auch ohne www. Https://example.com und https://www.example.com bedienen also beide die gleiche Anwendung.

Aber dies erzeugt einige interessante Probleme für meine benutzerdefinierten Endpunkte: die GET-Anfrage funktioniert immer. aber die POST-Anforderung funktioniert nur, wenn ich sie von https://example.com aus versuche, NICHT von https://www.example.com. Im letzteren Fall zeigt sie mir einfach eine fehlgeschlagene Anfrage an. Keine Antwort, nichts

Ich habe gegoogelt und es scheint mit CORS zu tun zu haben, aber ich konnte es nicht beheben. Irgendwelche Ideen?

php reactjs wordpress cors wordpress-rest-api

Veröffentlicht am 09/05/2020 um 11:32
quelle vom benutzer Danny Hobo

In anderen Sprachen...

2 antworten

shazyriver · Answer 1 · 2020-05-17 10:38

Zunächst einmal möchte ich darauf hinweisen, dass Ihre GetAnfragen funktionieren, weil sie zu der Kategorie gehören, die keine Preflight-Anfrage auslöst. Während Ihre PostAnfrage wahrscheinlich irgendeinen Header verwendet, der sie aus der Kategorie entfernt, so dass ein Preflight durchlaufen werden muss. Wenn Sie daran interessiert sind, mehr zu lesen, hier ist der Link zur Dokumentation.

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

Nun, laut Ihrem Kommentar ist der Fehler, den Sie bekommen, der

Die Antwort auf die Preflight-Anfrage besteht die Zugangskontrollprüfung nicht: Nein Der 'Access-Control-Allow-Origin'-Header ist auf der angeforderten ressource.

Die Methode, die Sie für das Setzen von Überschriften verwenden, funktioniert, wie Sie in einem Kommentar erwähnt haben, bei Restanfragen nicht. Sie können die untenstehende Funktion in Ihrer functions.phpoder einer Plugin-Datei verwenden, um den Ursprung auf *.

function sr_rest_send_cors_headers( $value ) 
{   
    header( 'Access-Control-Allow-Origin: *' );
    header( 'Access-Control-Allow-Methods: OPTIONS, GET, POST, PUT, PATCH, DELETE' );
    header( 'Access-Control-Allow-Credentials: true' );
    header( 'Vary: Origin', false );

    return $value;
}
add_filter( 'rest_pre_serve_request', 'sr_rest_send_cors_headers', 11 );

Obwohl ich empfehle, was WordPress standardmäßig tut. Wenn Sie nachschauenwp-includes/rest-api.php, finden Sie die ursprüngliche Funktion, die ich für Ihren Zweck modifiziert habe. Wenn Sie daran interessiert sind, einen Blick darauf zu werfen, hier ist der Trac-Link.

https://core.trac.wordpress.org/browser/tags/5.4/src/wp-includes/rest-api.php#L574

Dmitry · Answer 2 · 2020-05-14 09:23

stimmen

0

Ich habe Ihr Problem gefunden, das Sie von Ihrer Url entfernen müssen, wpund es sollte funktionieren. Zum Beispiel:

https://example.com/wp/wp-json/game/countries

Sollte funktionieren:

https://example.com/wp-json/game/countries

Sie können sich auch dieses Tutorial ansehen. Ich hoffe, es hilft Ihnen.

Beantwortet am 14/05/2020 um 09:23
quelle vom benutzer Dmitry