Requête POST vers une API distante

Bonjour à tous,

J’ai un projet sous WordPress dans lequel j’ai développé une fonctionnalité avec React JS. La partie fonctionnant avec React utilise l’API WordPress du site, jusque là tout va bien.

Je fais des requêtes en GET et en POST, pas de soucis ça fonctionne bien.

Enfin, pas toujours. J’ai un problème remonté par plusieurs utilisateurs qui passent par le même opérateur pour la 4G. Pour ces utilisateurs, les requêtes POST ne fonctionnent pas ! J’en ai été le premier surpris car je n’avais jamais vu ce genre de soucis avec un opérateur en particulier.

Donc déjà de ce côté là je ne comprends pas. La requête me renvoie un code HTTP 307 et tente de rediriger en rejouant une vingtaine de fois la requête avant de planter.

Voici la requête en question :

const datas = {
  'title': "Hello world",
  'slug': "hello-world"
}

fetch(Constants.API_URL + 'games/', {
  method: 'POST', 
  mode: 'cors',   
  headers: {
    'content-type': 'application/json',
    'Authorization': 'Basic ' + btoa('Username:**** **** **** **** **** ****')
  },
  body: JSON.stringify(datas)
})
.then(function (response) {
  console.log(response);
})

J’ai simplifié au maximum ma requête pour essayer de comprendre ce qui clochait mais ça ne fonctionne pas mieux, et je ne comprends toujours pas.

J’ai ensuite voulu monter une version de développement du site pour pouvoir corriger plus facilement, et comme les requêtes ne sont plus effectuées par le même domaine, j’ai une erreur de type "CORS Error" mais je ne comprends pas non et ne trouve pas le bon réglage.

La requête est toujours la même.

Est-ce que quelqu’un aurait une idée pour essayer de me dépanner ?

Merci d’avance

Hello,

Pour effectuer ta requête le problème de CORS se situe du côté du serveur, pas côté client. C’est tout simplement car tu n’es pas sur le même domaine pour ton front et ton back. La solution et d’aller tweaker ton nginx ou ton wordpress pour ajouter les bonnes options CORS.

Je te laisse google la chose il y a des TONNES de ressources sur le sujet sur internet .

Bonne fin de journée !

Merci de ta réponse et de ta réactivité.

Effectivement, j’ai déjà fait quelques recherches auparavant à ce sujet avant de venir poster ici et je n’ai rien trouvé.

Un de mes problèmes est que dans les "headers" j’ai bien un paramètre "Allow: GET" lorsque j’effectue une requête GET mais dès que je passe en POST, ce paramètre disparaît.

J’ai essayé la manip' suivante qui ne donne rien : https://robertmarshall.dev/blog/wordpress-rest-api-cors-issues/

J’imagine bien que le problème vient de WordPress mais malheureusement, toutes mes recherches sont restées nulles pour le moment

Merci de ton aide.

Voici le code que j’ai ajouté à mon WordPress

add_action('init', 'handle_preflight');
function handle_preflight() {
    $origin = get_http_origin();
    if ($origin === 'https://5723-74e0752c2fa3.wptiger.fr') {
        header("Access-Control-Allow-Origin: 5723-74e0752c2fa3.wptiger.fr");
        header("Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE");
        header("Access-Control-Allow-Credentials: true");
        header('Access-Control-Allow-Headers: Origin, X-Requested-With, X-WP-Nonce, Content-Type, Accept, Authorization');
        if ('OPTIONS' == $_SERVER['REQUEST_METHOD']) {
            status_header(200);
            exit();
        }
    }
}

add_filter('rest_authentication_errors', 'rest_filter_incoming_connections');
function rest_filter_incoming_connections($errors) {
    $request_server = $_SERVER['REMOTE_ADDR'];
    $origin = get_http_origin();
    if ($origin !== 'https://5723-74e0752c2fa3.wptiger.fr') return new WP_Error('forbidden_access', $origin, array(
        'status' => 403
    ));
    return $errors;
}

L’URL indiquée est l’URL de mon site en développement et lorsque j’effectue une requête depuis ce site vers mon API distante, voici la réponse maintenant

Access to fetch at 'https://www.daypargolf.com/wp-json/wp/v2/courses?_embed&acf_format=standard&search=&per_page=100&orderby=title&order=asc' from origin 'https://5723–74e0752c2fa3.wptiger.fr' has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: The 'Access-Control-Allow-Origin' header contains the invalid value '5723–74e0752c2fa3.wptiger.fr’. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request’s mode to 'no-cors’ to fetch the resource with CORS disabled.

Et cette erreur intervient maintenant même lors d’une requête en GET. Voici ce que j’ai dans la console

EDIT : la fonction get_http_origin() me renvoie une chaîne de caractère vide

Supprime cette condition sur l’origine, elle sert de toutes façons à rien.

En plaçant une règle dans le .htaccess j’ai pu effectuer ma requête depuis un domaine différent.

Et au passage j’ai trouvé pour mes requêtes POST ne fonctionnaient pas sur un opérateur en particulier. C’est dû à une surcouche de sécurité activé par o2switch qui doit filtrer un paramètre supplémentaire ajouté par l’opérateur en tant que spam ou autre…

En tout cas merci de ton aide

Hello Ariol,

Je suis dans la même situation, au final comment as-tu régler le souci avec o2switch stp ?