Why Am I Getting a Status 200 But Response is Empty

Question

Hello I'm creating a user search, my request is sent from client via a service and received on the back end (Status 200). The problem I am having is that my response is empty. I spent days thinking it was something on the back end so once I added res.status(201).json(payload) I realized results are coming back undefined and empty. I'm thinking it is my req.body, because when I console.log I get {}. I have app.use(express.json()) before I use the route. The Content-Type is application/json, so when the service is sent and I console.log the results(I get undefined) because there is nothing in the payload.

I have included a snippet of my code.

header.ts

export class HeaderComponent  {

  //products is my database collection
  //Products is my model

 products:Array<Products> = [];
 results = [];
 hasQuery:Boolean = false;

//function called when user types in input box
sendData(event:any){
  
  //console.log(event.target.value);
  let query:string = event.target.value;
  //Will match if query is nothing or only spaces
  let matchSpaces:any=query.match(/\s*/);
        console.log("What about match");
     if(matchSpaces[0] === query){
         console.log("What about query");
      this.products=[];
      this.hasQuery = false;

    return;

  }
  console.log("about to call service")
  this.searchService.searchProducts(query.trim()).subscribe((results) =>{
    this.products = results;
     this.hasQuery = true;
    console.log(results) 
   
  })
 } 
}

search.service.ts

import { Injectable } from '@angular/core';
import{HttpClient, HttpHeaders} from '@angular/common/http';
import{map, catchError, tap} from 'rxjs/operators'
import { Observable } from 'rxjs';
import {MessengerService} from 'src/app/services/messenger.service';
import {productsUrl} from '@app/ui/header/api'
import { productUrl } from '@app/config/api';


export interface Products{
  _id: string,
  name: string
}


@Injectable({
  providedIn: 'root'
})
export class SearchService {

 
  constructor(private http:HttpClient) { }
  
 
 
  searchProducts(query:string){
    console.log("Does it get  my  searchProducts");
      return this.http.post<{payload: Array<Products>}> 
      (productsUrl, {payload: query}, {
  
         headers: new HttpHeaders({'Content-Type': 
        'application.json'})       
         }).pipe(
       map(data => data.payload)
     
    );
        
  }
  
}

getProducts.js

var express = require('express');
const cors    = require('cors');
var bodyParser = require('body-parser')
const Products      = require('../../../liveSearch');
var router = express.Router();
const app = express();



 router.get('/', function(req, res){
   res.send('GET route on api here.');
});

router.post('/getProducts', async(req, res) =>{

     let payload = req.body;
     let search = await Products.find({name: {$regex: new RegExp('^'+payload+'.*',
   'i')}}).exec();
     //Limit search to 10
       search = search.slice(0, 10);
       console.log("Inside search",search);
       //added this to see why not getting a response
       res.status(201).json(payload)
     // res.send({payload:search});
    
     
})

//export this router to use in our server.js
module.exports = router;

server.js

const express = require('express');
const cors    = require('cors');
const router = express.Router();
const Products = require('./liveSearch');
const getProducts = require('.../../controllers/api/getProducts/getProducts')


const mongoose = require('mongoose');
mongoose.Promise = Promise;


mongoose.connect('mongodb://localhost/productLiveSearch', {useNewUrlParser:
true, useUnifiedTopology: true, }); 
const db = mongoose.connection;
db.on('error', error => console.log(error));
db.once('open', () =>{  console.log('Connected to Mongoose')});

 

const app = express();

app.use(function(req,res,next){
  res.header('Access-Control-Allow-Origin', '*');
  res.header('content-type','application/json');
  res.header('Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization');
  res.header('Access-Control-Allow-Methods','POST, GET, DELETE, PUT, OPTIONS');
  res.header('Allow', 'GET, POST, OPTIONS, PUT, DELETE');
  // res.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Token, Timestamp, X-Requested-With, Language-Code"); 
  next();
  });

 
app.use(cors());
var corsOptions = {
  origin: 'http://localhost:4200',
  optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204
}

/*app.options('/getProducts', cors()) // enable pre-flight 
app.use(cors({
  origin: [
    'http://localhost:4200'         //this is my front-end url for development
    //'http://192.168.1.67:4200'
    //'http://www.myproductionurl.com'
  ]
}))*/


  app.use(express.json());
  app.use(express.urlencoded({extended:true}));


  app.use('/', getProducts)
  app.use('/getProducts', getProducts); 

  app.get('/', function(req, res){
  res.send('hello world');
});


   
app.listen(process.env.Port|| 3000, () => {
    console.log("Server has started on Port 3000");

});

db schema
liveSearch.js

const mongoose = require('mongoose');

const productSchema = mongoose.Schema({
    name:{
        type: String,
        required: true
    }
});

module.exports = mongoose.model('Products', productSchema);
//module.exports = someProducts

html snippet

<input class="form-control py-2 border-right-0 border" name="payload" 
  id="payload" type="search" (keyup)="sendData($event)">

<p *ngIf="products.length < 1 && hasQuery">Sorry nothing found</p> 

<ng-template *ngFor let-product [ngForOf]="products" let-i="index">
</ng-template>

I really appreciate any help I have been working on this diligently trying to figure this out.

Thanks In Advance