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

16

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