How to fix 404 Not Found when sending GET/POST requests to express server via Angular App and NodeJS

I am trying to create an Angular app that sends GET & POST requests to an express server using NodeJS.

When I serve the app, GET & POST requests are meant to be sent to my local server, but I'm getting an error in the console, this error is logged below.

Also, when I go to localhost:3000, the server is running.

Here is my component class:

import { Component, OnInit } from "@angular/core";import { RootService } from "./root.service";@Component({  selector: "app-root",  templateUrl: "./root.component.html",  styleUrls: ["./root.component.css"]})export class RootComponent implements OnInit {  constructor(private rootService: RootService) {}  ngOnInit() {    this.rootService.getAPIData().subscribe(      response => {        console.log("response from GET API is ", response);      },      error => {        console.log("error is ", error);      }    );    this.rootService.postAPIData().subscribe(      response => {        console.log("response from POST API is ", response);      },      error => {        console.log("error during post is ", error);      }    );  }}

And here is root.service.ts:

import { Injectable } from '@angular/core';import { HttpClient } from '@angular/common/http';@Injectable({  providedIn: 'root'})export class RootService {  constructor(private http: HttpClient) { }  getAPIData(){    return this.http.get('/api/getData')  }  postAPIData(){return this.http.post('/api/postData', {'firstName' : 'Code', 'lastName' : 'Handbook'})  }}

Here is my server code:

const express = require('express')const app = express()const bodyParser = require('body-parser')app.get('/', (req, res) => {res.send('Welcome to Node API')})app.get('/getData', (req, res) => {res.json({'message': 'Hello World'})})app.post('/postData', bodyParser.json(), (req, res) => {res.json(req.body)})app.listen(3000, () => console.log('Example app listening on port 3000!'))

I also have this proxy.conf.json file:

{"/api/*": {"target": "http://localhost:3000","pathRewrite": {"^/api" : ""}  }}

When I serve my app, I get the following output to the console:

error is
Object { headers: {…}, status: 404, statusText: "Not Found", url: "http://localhost:4200/api/getData", ok: false, name: "HttpErrorResponse", message: "Http failure response for http://localhost:4200/api/getData: 404 Not Found", error: "\n\n\n\nError\n\n\n

Cannot GET /api/getData

\n\n\n" } root.component.ts:18:8 error during post is
Object { headers: {…}, status: 404, statusText: "Not Found", url: "http://localhost:4200/api/postData", ok: false, name: "HttpErrorResponse", message: "Http failure response for http://localhost:4200/api/postData: 404 Not Found", error: "\n\n\n\nError\n\n\n

Cannot POST /api/postData

\n\n\n" }

Can someone please help me with this error?