La demande POST de l'API personnalisée de WordPress échoue dans Réagir

Question

La demande POST de l'API personnalisée de WordPress échoue dans Réagir

voix

4

J'ai un backend WordPress où j'ai ajouté mes propres terminaux personnalisés à l'API :

// 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' ),
    )
);

J'ai configuré mon environnement comme suit : https://example.com est l'endroit où se trouve l'application React, et WordPress se trouve dans un sous-répertoire, sur https://example.com/wp

Ma demande React fait des demandes POST et GET à ces points d'extrémité ci-dessus. J'ai une variable d'environnement de production dans laquelle je fixe l'URL de base de l'API, qui est (https://example.com/wp/wp-json/gamegame est mon espace de noms) et je peux donc faire des requêtes avec Axios vers https://example.com/wp/wp-json/game/countrieset https://example.com/wp/wp-json/game/check_answervoilà le problème.

Mon serveur est configuré de manière à servir l'application React avec et sans www. Ainsi, https://example.com et https://www.example.com servent tous deux la même application.

Mais cela génère un problème intéressant pour mes paramètres personnalisés : la requête GET fonctionne toujours. mais la requête POST ne fonctionne que si je l'essaie depuis https://example.com, et non depuis https://www.example.com . Dans ce dernier cas, elle me montre simplement une demande qui a échoué. Pas de réponse, rien

J'ai fait des recherches sur Google et il semble qu'il y ait un lien avec la SCRO, mais je n'ai pas pu le réparer. Des idées ?

php reactjs wordpress cors wordpress-rest-api

Créé 09/05/2020 à 11:32
source utilisateur Danny Hobo

Dans d'autres langues...

2 réponses

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

Tout d'abord, je tiens à souligner que vos Getdemandes fonctionnent parce qu'elles appartiennent à la catégorie qui ne déclenche pas de demande de prévol. Alors que votre Postdemande utilise probablement un en-tête qui la retire de la catégorie et qui nécessite donc un contrôle préalable pour être acceptée. Si vous souhaitez en savoir plus, voici le lien vers la documentation.

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

Maintenant, selon votre commentaire, l'erreur que vous obtenez est

La réponse à une demande de pré-vol ne passe pas le contrôle d'accès : Non L'en-tête "Access-Control-Allow-Origin" est présent sur l'étiquette ressource.

La méthode que vous utilisez pour définir les en-têtes, comme vous l'avez mentionné dans un commentaire, ne fonctionne pas pour les demandes de repos. Vous pouvez utiliser la fonction ci-dessous dans votre fichier functions.phpou dans un plugin pour mettre l'origine en *.

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 );

Bien que je recommande ce que WordPress fait par défaut. Si vous vérifiezwp-includes/rest-api.php, vous trouverez la fonction originale que j'ai modifiée pour votre usage. Si vous souhaitez y jeter un coup d'oeil, voici le lien trac.

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

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

voix

0

J'ai trouvé votre problème, vous devez le supprimer de votre url wpet cela devrait fonctionner. Par exemple :

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

Il devrait l'être :

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

Vous pouvez également consulter ce tutoriel. J'espère qu'il vous aidera.

Créé 14/05/2020 à 09:23
source utilisateur Dmitry