Die POST-Anfrage des benutzerdefinierten WordPress-API-Endpunkts schlägt in React fehl

Question 1

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://beispiel.com Hier befindet sich die React-Anwendung, und WordPress befindet sich in einem Unterverzeichnis, on https://example.com/wp

Meine React-Anwendung stellt POST- und GET-Anforderungen an die oben genannten Endpunkte. Ich habe eine Produktionsumgebungsvariable, in der ich die Basis-URL der API festlege, nämlich https://example.com/wp/wp-json/game (‘game’ ist mein Namensraum) und so kann ich mit Axios Anfragen stellen https://example.com/wp/wp-json/game/countries und https://example.com/wp/wp-json/game/check_answer und hier kommt das Problem.

Mein Server ist so konfiguriert, dass er die React-Anwendung sowohl mit als auch ohne bedient www. So https://beispiel.com und https://www.beispiel.com beide dienen der gleichen Anwendung.

Dies führt jedoch zu einem interessanten Problem für meine benutzerdefinierten Endpunkte: Die GET-Anforderung funktioniert immer. aber die POST-Anfrage funktioniert nur, wenn ich es ausprobiere https://beispiel.comNicht von https://www.beispiel.com . Im letzteren Fall zeigt es mir einfach eine fehlgeschlagene Anfrage. Keine Antwort, nichts.

Ich habe gegoogelt und es scheint mit CORS zusammenzuhängen, aber ich konnte es nicht beheben. Irgendwelche Ideen hier?

Question 2

Zunächst möchte ich Sie darauf hinweisen Get Anfragen funktionieren, weil sie zu der Kategorie gehören, die keine Preflight-Anfrage auslöst. Während Ihr Post Die Anforderung verwendet wahrscheinlich einen Header, der sie aus der Kategorie entfernt, sodass der Preflight bestanden werden muss. Wenn Sie mehr lesen möchten, finden Sie hier den Link zur Dokumentation.

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

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

Die Antwort auf die Preflight-Anfrage besteht die Zugriffssteuerungsprüfung nicht: Für die angeforderte Ressource ist kein Header „Access-Control-Allow-Origin“ vorhanden.

Die Methode, die Sie zum Festlegen von Headern verwenden, wie Sie in einem Kommentar erwähnt haben, funktioniert bei Restanforderungen nicht. Sie können die folgende Funktion in Ihrem verwenden functions.php oder eine Plugin-Datei, um den Ursprung festzulegen *.

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 überprüfen wp-includes/rest-api.php Sie finden die ursprüngliche Funktion, die ich für Ihren Zweck modifiziert habe. Wenn Sie einen Blick darauf werfen möchten, hier ist der Trac-Link.

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