node.js - How to make post request from angular to node server

Question

When I print contents of request on Node server, I can't see the user data anywhere.

Here is my Node server:

var http = require('http');
http.createServer( function (request, response) {  
    console.log(request);
}).listen(8080);
console.log('Server running at http://127.0.0.1:8080/');

And here is Angular2 code:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import { Http, Response, Headers , RequestOptions } from "@angular/http";
import 'rxjs/add/operator/retry'; // to be able to retry when error occurs
import { Observable } from "rxjs/Rx";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit{
  title = 'Angular Test';
  user = { id : 1, name : "Hello"};
  constructor (private http: Http) {}

  ngOnInit(): void {
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    console.log(this.user);

    this.http.post("http://localhost:8080/", this.user, options)
    .subscribe( 
    (err) => {
        if(err) console.log(err);
        console.log("Success"); 
    });
  }
}

Can anyone help me out or explain how to handle http request in angular.

Answer 1

That is your server:

const express = require('express')
const bodyParser = require('body-parser');
const app = express()

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

app.post('/ping', function (req, res) {
  res.send(req.body)
})

app.listen(3000, function () {
  console.log('Example app listening on port 3000!')
})

That is your angular client:

import { Component } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  user = { id : 1, name : 'Hello'};

  constructor(private http: HttpClient) { }

  callServer() {
    const headers = new HttpHeaders()
          .set('Authorization', 'my-auth-token')
          .set('Content-Type', 'application/json');

    this.http.post('http://127.0.0.1:3000/ping', JSON.stringify(this.user), {
      headers: headers
    })
    .subscribe(data => {
      console.log(data);
    });
  }
}

repo https://github.com/kuncevic/angular-httpclient-examples