<div dir="ltr"><div class="gmail_default" style="font-family:arial,helvetica,sans-serif">Salut,</div><div class="gmail_default" style="font-family:arial,helvetica,sans-serif"> </div><div class="gmail_default" style="font-family:arial,helvetica,sans-serif">Bon, j'avance... Mais lentement. En réalité, je soupçonne désormais plutôt un bogue dans Dancer2. En effet, en virant le code React Native par un bête script javascript full-native, je reproduis le phénomène.</div><div class="gmail_default" style="font-family:arial,helvetica,sans-serif"> </div><div class="gmail_default" style="font-family:arial,helvetica,sans-serif">Voici le javascript :</div><div class="gmail_default" style="font-family:arial,helvetica,sans-serif"> </div><div class="gmail_default" style="font-family:arial,helvetica,sans-serif">% cat index.html</div><div class="gmail_default" style="font-family:arial,helvetica,sans-serif"><!DOCTYPE html> <html> <head> <script> const submitConnectAsync2 = async () => { return fetch('<a href="http://localhost:5000/connect">http://localhost:5000/connect</a>', { mode: 'no-cors', method: 'POST', headers: { 'Accept' : 'application/json', 'Content-Type' : 'application/json', }, body: JSON.stringify({'login':"PK", 'password':"PK"}) }) //.then(response => response.json()) .then(response => response.text()) .then(text => { console.log("Received text:", text); }) .then(json => { console.log("Received:", json); }) .catch(error => { console.log("Error:", error); }); }; window.onload = () => { document.querySelector("button").onclick = submitConnectAsync2; }; </script> </head></div><div class="gmail_default" style="font-family:arial,helvetica,sans-serif"> </div><div class="gmail_default" style="font-family:arial,helvetica,sans-serif">et le code pour Dancer2 (j'ai amélioré en ajoutant les status de retour corrects) :</div><div class="gmail_default" style="font-family:arial,helvetica,sans-serif"> </div><div class="gmail_default" style="font-family:arial,helvetica,sans-serif">% cat <a href="http://server.pm" rel="noreferrer" target="_blank">server.pm</a> package server; use Dancer2; set session => "Simple"; set serializer => 'JSON'; hook 'before' => sub { response_header 'Access-Control-Allow-Origin' => '*'; }; </div><div class="gmail_default" style="font-family:arial,helvetica,sans-serif"> </div><div class="gmail_default" style="font-family:arial,helvetica,sans-serif">hook before => sub { if (!session('user') && request->path !~ m{^/connect}) { forward '/connect', { requested_path => request->path }; } }; post '/connect' => sub { my $post = from_json( request->body ); debug "\t\t", request->body; my $login = params('body')->{login}; my $password = params('body')->{password}; status 200; debug "\t\t login : $login password : $password"; if ( ($login eq 'PK') && ($password eq 'PK') ) { # nothing possible to add after sending a request debug "\t\t Valid login and password : state connected\n"; session user => $login; debug "\t\t", ({"ConnectionState" => "connected"}); my %state = ( ConnectionState => "connected" ); debug "\t\t", %state; #send_as JSON => ({"ConnectionState" => "connected"}); status 201; #send_as JSON => \%state; send_as JSON => {"OK"}; } else { debug "\t\t Unvalid login and password : state unconnected\n"; debug "\t\t", ({"ConnectionState" => "unconnected"}); status 401; session flash => 'Unvalid login and password match!'; send_as JSON => ({"ConnectionState" => "unconnected"}); redirect '/connect?failed=1'; };</div><div class="gmail_default" style="font-family:arial,helvetica,sans-serif"> true; (le hook ne sert à rien, puisque je désactive le CORS dans l'envoi) Il faut aussi ajouter dans le fichier de conf % cat config.yml logger: Console engines: logger: Console: log_level: core</div><div class="gmail_default" style="font-family:arial,helvetica,sans-serif"> </div><div class="gmail_default" style="font-family:arial,helvetica,sans-serif">Le test est toujours valide avec cURL (cf. mon premier post), ce qui prouve que ce test n'est pas correct pour valider le serveur Dancer2. En revanche, en testant dans FF et Chromium, j'ai toujours les 2 mêmes erreurs (c'est-à-dire une erreur de parsing du json retour pour FF, qui trouve pourtant la requête retour, et Chrome qui s'arrête dès l'erreur).</div><div class="gmail_default" style="font-family:arial,helvetica,sans-serif"> </div><div class="gmail_default" style="font-family:arial,helvetica,sans-serif">Du coup, je suis obligé de penser que l'erreur vient de Dancer2, puisque le script javascript est bon et si je remplace Dancer2 par un serveur en javascript, il fonctionne... Donc soit mon code contient une erreur, soit Dancer2 est bogué... J'aurais tendance à incriminer mon code, mais là, je sèche :( </div><div class="gmail_default" style="font-family:arial,helvetica,sans-serif"> </div><div class="gmail_default" style="font-family:arial,helvetica,sans-serif">PK </div></div> <div class="gmail_quote"><div dir="ltr" class="gmail_attr">Le ven. 9 juin 2023 à 06:25, Patrice Karatchentzeff <<a href="mailto:patrice.karatchentzeff@gmail.com">patrice.karatchentzeff@gmail.com</a>> a écrit : </div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex">Merci de ta réponse. Je ne me souviens plus d'où j'ai récupéré ce code, mais je crois qu'il est dans la doc officielle de Dancer2. Avec ta modif, j'ai exactement le même comportement, sauf que cela ajoute une erreur côté Dancer en cas de chaîne vide : % curl --header "Content-Type: application/json" --request POST <a href="http://localhost:5000/connect" rel="noreferrer" target="_blank">http://localhost:5000/connect</a> {"title":"Error 500 - Internal Server Error","status":500,"exception":"Can't use string (\"\") as a HASH ref while \"strict refs\" in use at... confirmée dans les logs : [xx:704249] error @2023-06-09 06:21:38> Route exception: Can't use string ("") as a HASH ref while "strict refs" in use at /home/pk/... line 94. in /home/pk/perl5/lib/perl5/Dancer2/Core/App.pm l. 1516 [xx:704249] core @2023-06-09 06:21:38> Entering hook core.error.init in (eval 245) l. 1 [xx:704249] core @2023-06-09 06:21:38> Entering hook core.error.before in (eval 245) l. 1 [xx:704249] core @2023-06-09 06:21:38> Entering hook core.error.after in (eval 245) l. 1 127.0.0.1 - - [09/Jun/2023:06:21:38 +0200] "POST /connect HTTP/1.1" 500 256 "-" "curl/7.81.0" Donc, ça me dégrade plutôt les choses. Avec le code initial, j'ai : % curl --header "Content-Type: application/json" --request POST <a href="http://localhost:5000/connect" rel="noreferrer" target="_blank">http://localhost:5000/connect</a> {"ConnectionState":"unconnected"} ce qui est le comportement attendu. Merci en tout cas d'avoir essayé de m'indiquer une piste. Je pense désormais à un bogue, côté React. J'ai déposé un bug request dans le github de React Native. Je verrais bien... Merci PK Le jeu. 8 juin 2023 à 21:47, Sébastien Feugère <<a href="mailto:sebastien@feugere.net" target="_blank">sebastien@feugere.net</a>> a écrit : > > Les messages d'erreur de Firefox et de Chrome semblent indiquer que les navigateurs essaient de parser du JSON qui n'en est pas, ou qui n'est pas valide... Peut être une page 404 ? > > J'ai mis la même route dans une application Dancer crée avec le générateur par défaut. > > params('body')->{login}; > > params('body')->{password}; > > > sont tous les deux undef, car dans cette situation, params('body') retourne un hash vide... Je ne vois pas comment ce code peut fonctionner avec cURL. Donc dans une application React, encore moins. > > my $post = from_json( request->body ); > my $login = $post->{login}; > my $password = $post->{password}; > > Avec ceci, j'ai pu me "connecter" avec cURL, pas de soucis et le JSON est bien valide, en utilisant : > > curl --header "Content-Type: application/json" --request POST --data '{"login":"PK","password":"PK"}' <a href="http://localhost:5000/connect" rel="noreferrer" target="_blank">http://localhost:5000/connect</a> > > En espérant que cela puisse aider... > > On 08/06/2023 09:10, Patrice Karatchentzeff wrote: > > Salut, > > Je poste ici, un peu en désespoir de cause... > > J'ai isolé mon problème, donc ce sera plus facile. Je cherche à me > connecter à un back-end Dancer2 avec un simple login+mot de passe > depuis une appli en Native React. Tout est hard-codé pour plus de > simplicité. Je poste une requête json (login+mot de passe) et le > serveur répond en json (connecté ou pas connecté selon la valeur de la > requête initiale). > > J'ai un résultat bizarre. Je n'arrive pas à incriminer exactement le > responsable. Ça marchotte avec Firefox, mais foire avec Chrome. > > Le problème identifié : la valeur de retour du json (donc côté > Dancer2) serait mal formattée. Firefox gueule, mais récupère le json > pourtant correctement. Chrome ne négocie rien du tout et s'arrête en > cours. > > Voici le code isolé en react native (désolé, GMail ne veut pas > d'attaché en javascript) : > > % cat App.js > import React, { useState, useEffect } from 'react'; > import { > View, > Text, > } from 'react-native'; > > const ipAddress = "192.168.1.103"; > const portAddress ="5000"; > const httpProtocol = "http"; > const uriBase = httpProtocol + "://" + ipAddress + ":" + portAddress ; > > > function App() { > > const jsonReader = { 'login':"PK", 'password':"PK" }; > let string = JSON.stringify(jsonReader); > > const [message, setMessage] = useState("disconnected"); > > const submitConnectAsync2 = async () => { > return fetch( > uriBase + '/connect', { > //'<a href="http://jsonplaceholder.typicode.com/posts" rel="noreferrer" target="_blank">http://jsonplaceholder.typicode.com/posts</a>', { > mode: 'no-cors', // beurk... > method: 'POST', > headers: { > 'Accept' : 'application/json', > 'Content-Type' : 'application/json', > }, > body: JSON.stringify(jsonReader), > }) > .then( (response) => { > //response.text(); > response.json(); > //console.log("Response:", response.text()); > console.log("Response:", response.json()); > console.log("Fin de l'envoi"); > }) > .then(text => { > console.log(`Received ${JSON.stringify(text)}`); > console.log("text :", text); > //let json = JSON.parse(text); > //setMessage(json); > console.log("Coucou2"); > }) > .then( (json) => { > setMessage("Connecté à la main"); > console.log("(1) connection state:", message); > console.log("Fin de la réception"); > }) > .catch( error => { > console.log("Transaction error:", error); > //console.log("body:", JSON.stringify(jsonReader)); > //console.log("response:", response.son()); > //console.log("json:", json); > }); > }; > console.log("(2) connection state:", message); > > useEffect(() => { > submitConnectAsync2(); > }, []); > > > return ( > <View style={{flex:1,backgroundColor:"white"}}> > <Text> > {message} > </Text> > </View> > ); > > > } > > export default App; > > Voici le code côté Dancer2 : > > % cat <a href="http://server.pm" rel="noreferrer" target="_blank">server.pm</a> > package server; > use Dancer2; > > set session => "Simple"; > set serializer => 'JSON'; > > hook 'before' => sub { > response_header 'Access-Control-Allow-Origin' => '*'; > }; > > post '/connect' => sub { > my $post = from_json( request->body ); > debug request->body; > my $login = params('body')->{login}; > my $password = params('body')->{password}; > debug "\t\t login : $login password : $password"; > if ( ($login eq 'PK') && ($password eq 'PK') ) { > # nothing possible to add after sending a request > debug "\t\t Valid login and password : state connected\n"; > session user => $login; > debug "\t\t", ({"ConnectionState" => "connected"}); > my %state = ( ConnectionState => "connected" ); > debug "\t\t", %state; > #send_as JSON => ({"ConnectionState" => "connected"}); > send_as JSON => \%state; > } > else { > debug "\t\t Invalid login and password : state unconnected\n"; > debug "\t\t", ({"ConnectionState" => "unconnected"}); > send_as JSON => ({"ConnectionState" => "unconnected"}); > }; > }; > > true; > > (le hook ne sert à rien, puisque je désactive le CORS dans l'envoi) > Il faut aussi ajouter dans le fichier de conf > > % cat config.yml > logger: Console > > engines: > logger: > Console: > log_level: core > > pour activer les debug, sinon remplacer par des print perl suffit. > > Le serveur « semble » fonctionner correctement : > > % curl --header "Content-Type: application/json" \ > --request POST \ > --data '{"login":"PK","password":"PK"}' \ > <a href="http://localhost:5000/connect" rel="noreferrer" target="_blank">http://localhost:5000/connect</a> > {"ConnectionState":"connected"} > > % curl --header "Content-Type: application/json" --request POST --data > '{"login":"PK","password":""}' <a href="http://localhost:5000/connect" rel="noreferrer" target="_blank">http://localhost:5000/connect</a> > {"ConnectionState":"unconnected"} > > % curl --header "Content-Type: application/json" --request POST > <a href="http://localhost:5000/connect" rel="noreferrer" target="_blank">http://localhost:5000/connect</a> > {"ConnectionState":"unconnected"} > > % curl <a href="http://localhost:5000/connect" rel="noreferrer" target="_blank">http://localhost:5000/connect</a> > {"status":404,"title":"Error 404 - Not Found","message":"/connect"} > > % curl --header "Content-Type: application/json" --request POST > <a href="http://localhost:5000/connect" rel="noreferrer" target="_blank">http://localhost:5000/connect</a> > {"ConnectionState":"unconnected"} > > Le débogueur de Firefox gueule sur le retour de json : > > 08:44:52,153 (2) connection state: disconnected App.js:58 > 08:44:52,407 Response: > Promise { <state>: "pending" } > App.js:36 > 08:44:52,408 Fin de l'envoi App.js:37 > 08:44:52,408 Received undefined App.js:40 > 08:44:52,408 text : undefined App.js:41 > 08:44:52,408 Coucou2 App.js:44 > 08:44:52,409 (1) connection state: disconnected App.js:48 > 08:44:52,409 Fin de la réception App.js:49 > 08:44:52,409 (2) connection state: Connecté à la main App.js:58 > 08:44:52,413 Uncaught (in promise) SyntaxError: JSON.parse: unexpected > end of data at line 1 column 1 of the JSON data > > La promesse n'est pas tenue, le response.json semble mal formaté. > Pourtant, dans l'onglet Réseau, j'ai bien la négociation correcte et > il lit correctement la réponse ! Ça fonctionne en changeant les > valeurs des logins/mot de passe. > > Le log de Dancer2 est en phase : tout semble se passer correctement... > sauf que je ne peux pas récupérer en interne la valeur de > response.json comme le montre la sortie console de FF. L'erreur est > donc « exacte » si je puis m'exprimer ainsi. > > Chrome est plus brutal. > > (2) connection state: disconnected > App.js:36 Response: Promise {<rejected>: SyntaxError: Unexpected end of input > at <a href="http://localhost:19006/static/js/bundle.js:54:43" rel="noreferrer" target="_blank">http://localhost:19006/static/js/bundle.js:54:43</a>} > App.js:37 Fin de l'envoi > App.js:40 Received undefined > App.js:41 text : undefined > App.js:44 Coucou2 > App.js:48 (1) connection state: disconnected > App.js:49 Fin de la réception > App.js:58 (2) connection state: Connecté à la main > App.js:34 Uncaught (in promise) SyntaxError: Unexpected end of input > (at App.js:34:1) > at App.js:34:1 > App.js:36 Uncaught (in promise) SyntaxError: Unexpected end of input > (at App.js:36:1) > at App.js:36:1 > > et il y a plus logiquement aucun échange dans l'onglet Réseau. Dancer2 > renvoie alors bien un 404. > > Je nage complètement. Le code native semble correct et a l'air de > fonctionner chez les autres. J'ai réinstallé node/nvm/native... et > Dancer2 semble fonctionner correctement. J'ai même essayé avec un > serveur en ligne, sans plus de succès, ce qui me laisse penser que > Dancer2 n'est pas en cause. J'ai aussi essayé toutes les versions de > nvm :( > > Bref, je ne sais plus qui incriminer, à part moi ! > > Un œil neuf serait aussi bienvenu qu'un conseil... > > Merci > > PK > > > PS : pour installer mon exemple en native : > > % npx install expo-cli > % npx create-expo-app App > % cd App > Remplacer App.js par mon exemple > % nps expo install react-dom react-native-web @expo/webpack-config > % npx expo start -- -c > taper w pour le serveur > > Changer la valeur des IP pour adapter à votre réseau ! > > -- > Sébastien Feugère > > _______________________________________________ > Perl mailing list > <a href="mailto:Perl@mongueurs.net" target="_blank">Perl@mongueurs.net</a> > <a href="http://listes.mongueurs.net/mailman/listinfo/perl" rel="noreferrer" target="_blank">http://listes.mongueurs.net/mailman/listinfo/perl</a> > Attention, les archives sont publiques -- |\ _,,,---,,_ Patrice KARATCHENTZEFF ZZZzz /,`.-'`' -. ;-;;,_ mailto:<a href="mailto:patrice.karatchentzeff@gmail.com" target="_blank">patrice.karatchentzeff@gmail.com</a> |,4- ) )-,_. ,\ ( `'-' '---''(_/--' `-'\_) </blockquote></div> -- <div dir="ltr" class="gmail_signature"><div dir="ltr"><div><div dir="ltr"><div> |\ _,,,---,,_ Patrice KARATCHENTZEFF ZZZzz /,`.-'`' -. ;-;;,_ mailto:<a href="mailto:patrice.karatchentzeff@gmail.com" target="_blank">patrice.karatchentzeff@gmail.com</a> |,4- ) )-,_. ,\ ( `'-' '---''(_/--' `-'\_) </div></div></div></div></div>