NodeJS - Angular

Version imprimable

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:

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:

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!');
});

12/04/2018, 22h57
Marco46

Tu as déclaré un endpoint GET sur /test mais tu fais un POST. Ça doit pas aider :)

modif

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

Angular :
app.component.ts

Code:

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:

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:

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

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:

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:

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(); });

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:

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:

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 !!! :)