Discussion: NodeJS - Angular

  1. #1
    Candidat au Club
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    mars 2018
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : mars 2018
    Messages : 3
    Points : 3
    Points
    3

    Par défaut NodeJS - Angular

    Bonjour,

    débutant en NodeJS je tente de récupérer la valeur d'une variable
    provenant d'une requête http (type post) Angular.
    Le résultat reçu sur ma page du serveur node (http://localhost:8000/test) -> valeur : [object Object]
    Je n'arrive pas à obtenir la valeur de la variable.
    Par avance merci de votre aide !

    Emm

    Côté Angular, le code :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    @Injectable()
    export class ProviderServiceComponent {
      nomUser = '';
     
      constructor(private http: HttpClient) {}
     
      //Dans cette fonction je récupère une variable (objet) issue de mon controleur "appComponent.ts" (Angular)
      hello(userName) {
     
        this.nomUser = userName;
        alert('dans Hello !!!' + this.nomUser);
        //Ici je sollicte mon serveur NODEJS 
        return this.http.post('http://localhost:8000/test/,', {
          nomUser: this.nomUser
        }).map(res => res);
      }

    Côté node JS, le code :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    const express = require('express');
     
    const app = express();
    const cors = require('cors')
    const bodyParser = require('body-parser');
     
    app.use(cors({
      origin: 'http://localhost:4200'
    }));
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({
      extended: true
    }));
     
     
    app.get('/test', (req, res) => {
      resultat = JSON.stringify(req.body);
      console.log(resultat);
      res.end('valeur : ' + req.body);
    })
     
     
    app.listen(8000, () => {
      console.log('Server started!');
    });

  2. #2
    Modérateur
    Avatar de Marco46
    Homme Profil pro
    Développeur informatique
    Inscrit en
    août 2005
    Messages
    3 138
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : août 2005
    Messages : 3 138
    Points : 10 883
    Points
    10 883

    Par défaut

    Tu as déclaré un endpoint GET sur /test mais tu fais un POST. Ça doit pas aider
    "Toute personne croyant qu'une croissance exponentielle peut durer indéfiniment dans un monde fini est soit un fou, soit un économiste."
    Kenneth E. Boulding

    "/home/earth is 102% full ... please delete anyone you can."
    Inconnu

    Trust me, i'm an engineer !
    https://www.youtube.com/watch?v=rp8hvyjZWHs

  3. #3
    Candidat au Club
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    mars 2018
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : mars 2018
    Messages : 3
    Points : 3
    Points
    3

    Par défaut modif

    merci Marco, en effet...
    j'ai rectifié quelque peu comme suit côté :

    Angular :
    app.component.ts
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
     
      envoiInfo(nomUser) {
        // passage de valeur variable reçue dans variable locale
        this.userName = nomUser;
        //test récup valeur
        console.log('dans le appComponent !!!' + this.userName);
        alert('dans le appComponent !!!' + this.userName);
     
        //Appel de la fonction "hello" du service Provider avec passage de paramètre
        this.restService.createOrUpdateUserName(this.userName)
        .subscribe(
          (response: string) => {
            console.log(`createOrUpdateUserName: res=${response}`);
          },
          (httpError: HttpErrorResponse) => {
            console.log(`createOrUpdateUserName: error=${JSON.stringify(httpError)}`);
          }
        );
     
      }
    rest.Service.ts mon Provider
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     
    @Injectable()
    export class RestService {
     
      constructor(private http: HttpClient) { }
     
      createOrUpdateUserName(userName: String) {
        alert(`valeur UserName dans REST.service : ${userName}`);//TEST réception variable OK
        console.log(`createOrUpdateUserName: ${resUrl}`);
        return this.http.post<string>(`${resUrl}`, userName);
      }
     
    }
    NODE JS
    server.js
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
     
    const express = require('express');
     
    //Utilisation du pseudo framework Express
    const app = express();
    const cors = require('cors')
    const bodyParser = require('body-parser');
     
    //Autorise le Angular à communiquer avec le serveur NODEJS
    app.use(cors({origin: 'http://localhost:4200'}));
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({
        extended: true
    }));
     
    app.all("/*", function(req, res, next){
      res.header('Access-Control-Allow-Origin', '*');
      res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
      res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');
      next();
    });
     
    //Utilisé pour le dialogue avec la partie Angular http://localhost:4200/test
    app.post('/', function (req, res) {
    console.log('Résultat validation saisie Angular : '+req.body.userName);
    })
     
    //Démararge du serveur NODEJS sur le port 8000
    app.listen(8000, () => {
        console.log('Server started!');
      });
    Du coup j'ai le résultat suivant :
    "Résultat validation saisie Angular : undefined"

    une idée ? par avance merci de votre aide

  4. #4
    Modérateur
    Avatar de Marco46
    Homme Profil pro
    Développeur informatique
    Inscrit en
    août 2005
    Messages
    3 138
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : août 2005
    Messages : 3 138
    Points : 10 883
    Points
    10 883

    Par défaut

    Quelques remarques :

    - Fais un log de req.body pour voir si t'as un body qui arrive, là il te dit que userName est undefined, mais peut être qu'il y a quelque chose dans ta payload.

    - Tu déclares ta route sur la racine '/' c'est bizarre parce que le commentaire sur la ligne juste au dessus dis qu'il est '/test'. Quelle est la valeur de resUrl depuis ton front ?

    - Est-ce que tu as regardé ce qui se passait dans la partie network des outils de debug de ton navigateur ? C'est la première chose à regarder avant de mettre des logs de debug partout.

    - Dernier point, pourquoi utilises-tu le middleware cors en le configurant sur ton front spécifiquement :

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    app.use(cors({
      origin: 'http://localhost:4200'
    }));

    si c'est pour ensuite set les headers CORS manuellement avec une wildcard :

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    app.all("/*", function(req, res, next){
      res.header('Access-Control-Allow-Origin', '*');
      res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
      res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');
      next();
    });
    "Toute personne croyant qu'une croissance exponentielle peut durer indéfiniment dans un monde fini est soit un fou, soit un économiste."
    Kenneth E. Boulding

    "/home/earth is 102% full ... please delete anyone you can."
    Inconnu

    Trust me, i'm an engineer !
    https://www.youtube.com/watch?v=rp8hvyjZWHs

  5. #5
    Candidat au Club
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    mars 2018
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : mars 2018
    Messages : 3
    Points : 3
    Points
    3

    Par défaut

    Merci pour tes précieux conseils Marco !
    Du coup Ayé ! ça fonctionne, je récupère bien dans node la valeur de ma variable envoyé par Angular.
    Donc voici le code revu et corrigé.

    Côté Angular : j'ai intégré pour la "payload" dans format JSON, l'objet à envoyer soit {userName : userName} au lieu de .., userName seulement

    Rest.service
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
     
    import { Injectable } from '@angular/core';
    import { HttpClient, HttpHeaders } from '@angular/common/http';
    const resUrl: String = "http://localhost:8000";
    const headers = new HttpHeaders().set('content-type', 'application/json');
     
    @Injectable()
    export class RestService {
     
        constructor(private http: HttpClient) { }
     
        createOrUpdateUserName(userName: String) {
           // alert(`valeur UserName dans REST.service : ${userName}`);//TEST réception variable OK
            console.log(`createOrUpdateUserName: ${resUrl}`);
            return this.http.post<string>(`${resUrl}`,
                {
                    userName: userName
                });
        }
    }
    Côté NODE JS, je recupère la valeur à l'aide de : req.body.userName
    server.js
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
     
    const express = require('express');
     
    //Utilisation du pseudo framework Express
    const app = express();
    const cors = require('cors')
    const bodyParser = require('body-parser');
     
    //Autorise le Angular à communiquer avec le serveur NODEJS
    app.use(cors({origin: 'http://localhost:4200'}));
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({
        extended: true
    }));
     
    //Utilisé pour le dialogue avec la partie Angular http://localhost:4200/
    app.post('/', function (req, res) {
    //console.log("1er LOG : "+JSON.stringify(data));
    console.log('Résultat validation saisie Angular : '+JSON.stringify(req.body.userName));
     
    })
     
    //Démararge du serveur NODEJS sur le port 8000
    app.listen(8000, () => {
        console.log('Server started!');
      });
    Encore merci !!!

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. nodejs et apache
    Par Invité dans le forum Performance Web
    Réponses: 2
    Dernier message: 19/11/2013, 14h25
  2. NodeJs et serveur HTTP
    Par royalwear dans le forum Général JavaScript
    Réponses: 0
    Dernier message: 21/11/2011, 10h36
  3. nodejs et websockets
    Par regis.portalez dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 28/09/2011, 10h58

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo