API Gateway throwing errors when POST request is made through Angular http client

Currently, I am trying to understand how I can incorporate AWS Lambda and RDS into an angular project I want to work on and so I decided to practice the HTTP request. I cracked my head for too long to get this thing right.

So I started by creating a lambda function that inserts data into the RDS I created. The lambda function I've written is given below.

Lambda Function

import pymysql
import json


def lambda_handler(event, context):
    endpoint = ""
    username = ""
    password = ""
    database_name = ""

    connection = pymysql.connect(endpoint, user=username, passwd=password, db=database_name)
    query_type = event['queryStringParameters']['type']
    query_title = event['queryStringParameters']['title']
    query_content = event['queryStringParameters']['content']

    cursor = connection.cursor()
    sql = """INSERT INTO Response(title, content) VALUES (%s, %s)"""
    insert_tuple = (query_title, query_content)
    cursor.execute(sql, insert_tuple)
    connection.commit()
    cursor.close()
    connection.close()
    creationResponse = {
        'response': json.dumps(event),
    }
    

    responseObject= {
        'statusCode': 200,
        'body': "hello! world",
        'headers': {
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': '*'
        }
    }
        

    return responseObject

I created AWS API gateway endpoint that triggers the above lambda function with a POST request. I also enabled CORS for the API POST method.

I used HTTP client from angular to call the API. Below the code that is under usage.

app.component.html

<form #postForm="ngForm" (ngSubmit)="onCreatePost(postForm.value)">
    <div class="form-group">
      <label for="title">Title</label>
      <input
        type="text"
        class="form-control"
        id="title"
        required
        ngModel
        name="title"
      />
    </div>
    <div class="form-group">
      <label for="content">Content</label>
      <textarea
        class="form-control"
        id="content"
        required
        ngModel
        name="content"
      ></textarea>
    </div>
    <button
      class="btn btn-primary"
      type="submit"
      [disabled]="!postForm.valid"
    >
      Send Post
    </button>
  </form>

app.component.ts

onCreatePost(postData: Post) {
    // Send Http request
    postData.type = "joel";
    let head =new HttpHeaders(
      {'Content-Type': "application/json", 
    }
      );
    console.log(postData);
    this.http.post<any>('https://uvcnd6vene.execute-api.ap-south-1.amazonaws.com/testt/test ', postData ,
    {headers: head})
    .subscribe(responseData => {  console.log(responseData)});
  
  }

Post Interface

export interface Post {
    type?: string;
    title: string;
    content: string;
    id?: string;
}

Now clicking on the send post button throws me some nasty errors I cannot figure out.

Can anyone tell me what I am doing wrong and correct me?

UPDATE

Here is part of the Log (Event) which shows that params are embedded in body and queryStringParameters:

  'queryStringParameters': None


 'body': '{"title":"Question Answer Website","content":"ad","type":"joel"}', 'isBase64Encoded': False}

Also body is a string rather than key value pairs, So the update made to the lambda function is:

def lambda_handler(event, context):
    
    connection = pymysql.connect(endpoint, user=username, passwd=password, db=database_name)
    val = json.loads(event['body'])
    print(val)
    query_type = val['type']
    query_title = val['title']
    query_content = val['content']

    cursor = connection.cursor()
    sql = """INSERT INTO Response(title, content) VALUES (%s, %s)"""
    insert_tuple = (query_title, query_content)
    cursor.execute(sql, insert_tuple)
    connection.commit()
    cursor.close()
    connection.close()
    creationResponse = {
        'response': json.dumps(event),
    }


    responseObject= {
        'statusCode': 200,
        'body': "damn",
        'headers': {
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': '*'
        }
    }

Changing this executed the lambda function thereby entering the data into the table.

BUT, no I am facing a new error.

Can anyone help me remove this error and also help me understand how to pass data to the queryParameters rather than body?

Every other aspect of the code other than the lambda function remains the same as mentioned above