Partage
  • Partager sur Facebook
  • Partager sur Twitter

react + API symfony

VinSls
10 décembre 2019 à 17:10:37

Hello tout le monde! (j'avais posté ce sujet sous la rubrique javascript, mes excuses j'a pas tilté ^^) 

J'ai un petit projet perso d'appli mobile qui nécessite l'utilisation d'API et on m'a conseillé de faire avec ce que je savais faire. Donc j'ai choisi Symfony, que je maîtrise le plus. 

J'ai suivi le cours de Sarah Kahlil et après quelques adaptations j'ai réussi à faire quelque chose qui fonctionne sur postman 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/**
* @param Request $request
* @Route("/users", name="user_create", methods={"POST"})
* @return Response
*/
public function createUSer(Request $request)
{
$data = $request->getContent();
$user = $this->get('jms_serializer')->deserialize($data, User::class , 'json');
$em = $this->getDoctrine()->getManager();
$em->persist($user);
$em->flush();
return new Response('', Response::HTTP_CREATED);
}

De ce côté pas vraiment de souci.

En revanche quand je veux connecter mon appli React à l'api qui permet de créer un nouvel utilisateur :

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
32
33
let request;
request = new Request('http://127.0.0.1:8000/users', {
method: 'POST',
mode: "cors",
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
nom: this.nom,
mail: this.mail,
mdp: this.mdp
})
});
fetch(request)
.then(response => {
if (response.status === 200) {
return response.json()
} else {
throw new Error('Faaack!!!!');
}
})
.then(response => {
console.debug(response);
}).catch(error => {
console.debug(error);
});
};

Voici l'erreur que je rencontre:

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
Request {
"_bodyInit": "{\"nom\":\"vincent\",\"mail\":\"nevermind\",\"mdp\":\"test\"}",
"_bodyText": "{\"nom\":\"vincent\",\"mail\":\"nevermind\",\"mdp\":\"test\"}",
"credentials": "omit",
"headers": Headers {
"map": Object {
"accept": "application/json",
"content-type": "application/json",
},
},
"method": "POST",
"mode": "cors",
"referrer": null,
}
Network request failed
- node_modules\react-native\Libraries\vendor\core\whatwg-fetch.js:504:29 in onerror
- node_modules\event-target-shim\lib\event-target.js:172:43 in dispatchEvent
- node_modules\react-native\Libraries\Network\XMLHttpRequest.js:580:29 in setReadyState
- node_modules\react-native\Libraries\Network\XMLHttpRequest.js:394:25 in __didCompleteResponse
- node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:190:12 in emit
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:366:47 in __callFunction
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:106:26 in <unknown>
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:314:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:105:17 in callFunctionReturnFlushedQueue
* [native code]:null in callFunctionReturnFlushedQueue

Quelqu'un a déjà eu ce type d'erreur?

Petit rappel, quand je passe par postman je peux rajouter des users sans aucun souci via mon api.

Merci bonne soirée à tous!

  • Partager sur Facebook
  • Partager sur Twitter
VinSls
14 décembre 2019 à 18:22:22

petit up? personne pour m'aiguiller? ^^
  • Partager sur Facebook
  • Partager sur Twitter
<?php?>
  • Mobile
19 décembre 2019 à 18:54:42

L'erreur que tu nous montres est affichée par la ligne 39 ?

En attendant, as-tu fais en sorte que le trafic de ton téléphone sur le port 8000 soit redirigé vers ton ordinateur ? Car l'IP 127.0.0.1 correspond à localhost. Donc si tu ne l'as pas fais, ton application cherche le serveur sur ton téléphone ! Et sachant que tu n'as pas de serveur sur ton téléphone qui écoute sur le port 8000, la requête échoue :D

Je t'invite donc à te concentrer sur la dimension réseau de ta requête plus que sur le code !

  • Partager sur Facebook
  • Partager sur Twitter
VinSls
22 décembre 2019 à 9:37:38

<?php?> a écrit:

L'erreur que tu nous montres est affichée par la ligne 39 ?

En attendant, as-tu fais en sorte que le trafic de ton téléphone sur le port 8000 soit redirigé vers ton ordinateur ? Car l'IP 127.0.0.1 correspond à localhost. Donc si tu ne l'as pas fais, ton application cherche le serveur sur ton téléphone ! Et sachant que tu n'as pas de serveur sur ton téléphone qui écoute sur le port 8000, la requête échoue :D

Je t'invite donc à te concentrer sur la dimension réseau de ta requête plus que sur le code !


Merci beaucoup pour ta réponse! j'ai pas eu le temps de me pencher dessus entre le taff et mes autres projets! je teste ça dans l'aprème je te tiens au jus! ;-)

-
Edité par VinSls 22 décembre 2019 à 9:39:10

  • Partager sur Facebook
  • Partager sur Twitter