无法获取/Node js

Question

I'm trying to start serving some static web pages using connect like this:

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

const app = express();
const port = 3000;

app.use(bodyParser.text());
app.use(cors());

app.post('/api/pesan', (req, res) => {
    console.log(req.body);
    res.status(200).send();
})

app.listen(port, () => console.log('Aplikasi berjalan di port', port));

and this is my app.component.ts

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

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

  constructor (private http: HttpClient){}

  kirim(){
    console.log(this.pesan);
    this.http.post('http://localhost:3000/api/pesan', this.pesan).toPromise();
    }

 )

i make newfolder /backend and put server.js there. i want to connect the node with app.component.html but i get this ERROR

Answer 1

From what I gather, there are two things you want to do:

1. Create an API and return the data you have posted.
2. Call that API endpoint from your frontend and console.log(...) the data

Here's an updated code that should work and why it didn't work before:

Node Server

I simply returned the data

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

const app = express();
const port = 3000;

app.use(bodyParser.text());
app.use(cors());

app.post('/api/pesan', (req, res) => {
    console.log(req.body);
    // UPDATED: This time, we return the data you passed
    res.status(200).send(req.body);
})

app.listen(port, () => console.log('Aplikasi berjalan di port', port));

Angular App

You were actually able to properly call your endpoint BUT you didn't do anything with the promise you created with .toPromise() . I updated the code to handle that.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  pesan = { foo: 'some awesome data' };

  constructor (private http: HttpClient){}

  kirim(){
    this.http.post('http://localhost:3000/api/pesan', this.pesan)
       .toPromise()
       .then(response => { 
          const data = response.json();
          console.log(data); 
       });
  }

}