POST ne fonctionne pas

Version imprimable

Bonjour à tous
Après des heures passées à chercher ça et là des idées pour résoudre mon problème, j'en appelle à nouveau à ce forum.
Je stocke les données saisies par un client dans une variable texte msg.
J'essaie d'envoyer ce texte au serveur par un POST avec XMLHttpRequest:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//************************envoi de la saisie**********************************************
function prgServeur(url,fctRetour){
    let zhttp = new XMLHttpRequest();                   //création de l'objet AJAX  
    zhttp.onreadystatechange = function(){              //creation evenement attente d'une reception
        if(this.readyState==4 && this.status==200){     //si message est bien reçu par le serveur 
            fctRetour(this);                            //exécute la fonction retour
        }
        else if(this.readyState && this.status==408){
            alert("Le serveur a rompu la liaison");
            return;
 
        }
    };
    //envoi de la saisie par un POST, le serveur renvoit l'ack 
    zhttp.open("POST", url, true);
    zhttp.setRequestHeader("Content-Type","Text/Plain");
    zhttp.send(msg);
}
//********************** traitement du message  retour ***************************
function retour(zhttp){
    let reponse = zhttp.responseText;
    alert(reponse);
}

Pas de réponse du serveur.
J'essaie aussi avec fetch:

Code:

1
2
3
4
5
6
7
8
9
10
function prgServeur(url){
    fetch(url, {
        method: 'POST',
        headers:{"Content-Type": "Text/Plain"},
        body: msg,
    })
    .then((response) => {
        alert(response);
    });
}

Toujours pas de réponse.
Je pense que mon message ne part pas.
Auriez vous une piste?

Salut mormic,

Code:

1
2
3
4
5
6
7
8
9
10
    fetch(url, {
        method: 'POST',
        body: JSON.stringify(msg),
        headers: { "Content-Type" : "Text/Plain" }
    })
        .then(response => response.text())
        .then(reponse => {
            alert(response);
        })
        .catch(err => console.log(err));

07/05/2024, 10h28
mormic

Merci ASCIIDEFOND pour cette réponse mais le serveur n'attend pas un objet JSON mais simplement du texte (à ski de fond).
Le Content_Type le précise bien avec Text/Plain.

Je vais de suite modifier le .then avec ta proposition.
07/05/2024, 11h32
ASCIIDEFOND

Citation:

body: JSON.stringify(msg),

Désolé, un copier-coller que je n'ai pas corrigé

Bonjour,
plus que ta façon d'envoyer les données, mais utilise l'API Fetch, c'est la façon dont tu les lis côté serveur qui pêche !
Avec :
Code:

1 2 3 4 5 6 7 8 9 fetch(url, { method: 'POST', body: "Evoi d'un simple texte", }) .then(response => response.text()) .then(reponse => { console.log(response); }) .catch(err => console.log(err));
côté serveur, il te faut récupérer les données avec :

Code:

$data = file_get_contents('php://input');

1 pièce(s) jointe(s)

Merci NOSMOKING pour ta remarque

Citation:

c'est la façon dont tu les lis côté serveur qui pêche !

Tu as raison car en consultalt la console je vois ces meessages:
Pièce jointe 654304
Par contre je n'utilise php.
Mon serveur est embarqué dans un microcontroleur ESP32 programmé en C/C++ avec PlateformIO et j'utilise une librairie
asyncWebServer:
Code:

1 2 3 4 5 6 7 8 9 //****API**** serveur.on("/API&Cmd=2AA", HTTP_POST, [](AsyncWebServerRequest *req){ req->send(200, "text/plain", "OK"); String x = req->getHeader(x)->value(); afficLcd2String(x,""); String message = req->getParam(message)->value(); afficLcd2String(message,""); delai('s',5); });
Peut-être que cela ne vous parle pas et qu'il faille que je m'adresse au forums Arduino/ESP32?

07/05/2024, 19h24
NoSmoking
Citation:

Peut-être que cela ne vous parle pas et qu'il faille que je m'adresse au forums Arduino/ESP32?

effectivement car dans ton code il y a des choses qui piquent les yeux :aie:

Entre autres, des variables semble t-il non déclarées : String message = req->getParam(message)->value();, que vaut par exemple message ?

De plus il te faudra surement envoyer tes messages de la forme "msg=Le contenu" ou JSON.stringify({msg:"Le contenu"}) si tu veux récupérer un paramètre nommé msg.

Commence donc par faire un test avec simplement
Code:

1 2 3 serveur.on("/API&Cmd=2AA", HTTP_POST, [](AsyncWebServerRequest *req){ req->send(200, "text/plain", "OK"); });

1 pièce(s) jointe(s)

Bonjour NOSMOKING
J'ai modifie côté serveur ainsi:

Code:

1
2
3
4
5
6
//****API****
  serveur.on("/API&Cmd=2AA", HTTP_POST, [](AsyncWebServerRequest *req){ 
    req->send(200, "text/plain", "OK");
    int nbParams = req->params();
    afficLcd2String("nb param",String(nbParams));
});

Côté client j'ai maintenant:

Code:

1
2
3
4
5
6
7
8
9
10
11
function prgServeur(url){
    fetch(url, {
        method: 'POST',
        headers:{"Content-Type": "Text/Plain"},
        body: msg
    })
        .then(response => response.text())
        .then(response => alert(response))
        .catch(err => {console.log(err),
                        alert(err)});
}

La console log indique maintenant ceci:
Pièce jointe 654342
Ce qui semblerait dire que le fetch n'est pas bien chargé. Y a-t'il une limitation dans le nombre de caractères envoyés?
Voici comment je constitue le message msg:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function lectureSaisie(){
    msg = "dest:" + touche + ",";
    progNum=document.getElementById("prog_num").value;
    msg += "pg:" + progNum;
    for(let i=0;i<10;i++){
        adEquipe[i]= document.querySelector("#m" + i + " .equipe_add").value;
        numRelais[i]= document.querySelector("#m" + i + " .n_relais").value;
        paramAction[i] = document.querySelector("#action" + i + " .taux").value;
        heureAction[i] = document.querySelector("#action" + i + " .hr").value;
        let y = "equip" + i;
        let x = document.querySelectorAll("input[name=" + y + "]");
        typeEquipe[i] = "0";
        for(let z of x){
            if(z.checked) {
                typeEquipe[i]= z.value;
                break;
            }
        }
        y = "acte" + i;
        x = document.querySelectorAll("input[name=" + y + "]");
        typeAction[i] = "0";
        for(let z of x){
            if(z.checked) {
                typeAction[i]= z.value;
                break;
            }
        }
    msg += ",man:" + i + ",adE:" + adEquipe[i] + ",nRl:" + numRelais[i] + ",tEq:" + typeEquipe[i] +
    ",tAc:" + typeAction[i] + ",pAc:" + paramAction[i] + ",hAc:" + heureAction[i];
    }   
}

Le problème vient peut-être de là. Je ne vois pas comment le convertir en JSON.

08/05/2024, 19h38
Toufik83

Bonjour,

Personnellement, je n'ai jamais eu ce genre d'erreur, mais en cherchant un peu sur google et stackoverflow, j'ai trouvé pas mal de discussions concernant le même sujet, les voici :
Sujet1
Sujet 2.

Ils parlent tous du même problème lié aux extensions google chrome, je ne sais pas si vous avez essayé un autre navigateur...
08/05/2024, 20h24
mormic

2 pièce(s) jointe(s)

Merci Toufik pour cette piste.
Je viens d'enlever les extensions Google Chrome et en effet les deux premiers messages d'erreur ont disparus.
Il ne reste plus que:
Pièce jointe 654379
Mais là c'est une autre histoire!

Je viens de trouver une grosse anomalie:
Dans mon serveur j'ai écrit:

Code:

serveur.on("/API&Cmd=2AA", HTTP_POST, [](AsyncWebServerRequest *req){

Alors que mon url doit-être "/API?Cmd=2AA". Voilà j'ai mis un & à la place du ? je suis vraiment nul parfois.

Il ne reste plus que:Pièce jointe 654380
09/05/2024, 06h47
Toufik83

Bonjour,

2 erreurs ont disparu c'est déjà un bon départ, mais je me demande aussi si tu as accès au code source de l'API ou bien au moins s'assurer qu'elle accepte les variables HTTP_POST ou bien GET ou PUT ?

Parce que d'après le code d'erreur 500, le problème est généralement lié a une mauvaise configuration du serveur, il faudrait donc trouver le fichier LOG qui enregistre les messages d'erreurs de chaque requête enoyée.

Concernant les paramètres de la requête, seulement le premier qui doit être précédé par un point d'intérrogation "?", les autres doivent être précédés par un "ET commercial &"

Dernier point, si tu utilises GET au lieu de POST serveur.on("/API?Cmd=2AA", HTTP_GET, [](AsyncWebServerRequest *req), des erreurs, ça passe... ?

Bonjour Toufik
Oui si j'utilise GET cela passe parfaitement; d'ailleurs j'initialise déjà mon serveur pour recevoir plusieurs commandes et je viens de rajouter un GET avec la commande "2AA" qui affiche bien sur le serveur et qui me renvoit bien "Hello" au client:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 serveur.on("/API", HTTP_GET, [](AsyncWebServerRequest *req){ if(!clientConnected){ req->send(408,"text/html", "Timeout"); return; } String commande[8], action[8]; int nbArgs = req->args(); for(int i=0;i<nbArgs;i++){ commande[i] = req->argName(i); action[i]=req->arg(i); } if(commande[0]=="Cmd" && action[0]=="2AA"){ afficLcd2String("Get recu", "ack envoye"); req->send(200,"text/plain", "Hello"); }
Donc c'est vraiment la syntaxe du POST qui ne va pas.
***************************************************************
Je viens de trouver où se situe le problème:
Pour transmettre mon POST, j'utilise l'URL "/API" mais pour revevoir des GET j'utilise aussi "/API" ce qui créer une confusion au niveau du serveur. J'ai remplacé l'URL du POST par "/Toto" et voilà, ça fonctionne parfaitement.
Désolé d'avoir remué ciel et terre pour une bétise comme un débutant sait en faire.
Quoi qu'il en soit je vous remercie d'avoir contribué à me sortir de l'ornière.

Bien cordialement
Michel

09/05/2024, 19h17
Toufik83
Bonjour,

Content que tu as pu résoudre le problème, mais ceci n'empêche pas d'optimiser l'API et de renvoyer un message d'erreur clair aux utilisateurs lorsque :
- La méthode utilisée est POST, mais un ou plusieurs paramètres existent dans l'url
- La méthode utilisée est GET, mais aucun paramètre n'existe dans l'url
C'est une erreur bloquante qui empêche totalement le fonctionnement du programme, il faudrait donc la gérer.
En faite, c'est seulement ce que je pense ..., rien ne t'obliges à le faire tout de suite.

Bonjour Toufik
En fait, dans mon programme existant, mon url /API...GET traite une quinzaine de commandes avec gestion des erreurs et message renvoyé au client. Tout cela fonctionne bien.
Voulant faire évoluer le prog par l'envoi de données émanant du client, je pensais que la librairie saurait faire le distingo entre une /API...GET et une /API...POST avec la somme d'ennuis générés.
Le fait de mettre une commande quelconque (/Toto...POST) j'ai enfin eu une réponse du serveur. Non satisfaisante car j'ai un message "Non reçues".
Code:

1 2 3 4 5 6 7 8 9 10 11 12 const char* MSG="message"; serveur.on("/Toto", HTTP_POST, [](AsyncWebServerRequest *req){ String msg =""; if(req->hasParam(MSG,true)){ msg=req->getParam(MSG,true)->value(); } else{ msg="Non recues"; } req->send(200, "text/plain", msg); afficLcd2String("Reception", msg.substring(0,15)); });
Il me reste maintenant à découvrir comment simplement récupérer les données envoyées par le client.
Les explications sur la librairie ESPAsynWebServer son difficiles à comprendre pour un amateur et souvent cela se résume à pomper des exemples pris sur le Net sans vraiment piger le pourquoi du comment.
Je continue donc mes investigations.

Merci encore pour ton implication.