Serverless lambda function failes in react with CORS - reactjs

Question

Hi all I have written a serverless lambda API using API gateway, the API works as I expect it to do so while i use POSTMAN. the api used PATCH method to update a record in dynamoDB. I have then implemented axios in my in my React app to make the call to my API. The call fails due to CORS fine, i went over to API gateway and i enabled CORS for that end point by pressing on to the method PATCH going into Method Response and Integration Method added all the response headders
Access-Control-Allow-Headers
Access-Control-Allow-Origin
Access-Control-Allow-Credentials
Access-Control-Allow-Methods
deployed the API and does not work. I then tried in my serverless.yml to add cors: true and deploy this didnt work either.
Here is my cod:
Serverless.yml:
setBookVotes:
handler: src/handlers/setBookVotes.handler
events:
- http:
method: PATCH
path: /book/{id}/vote
React:
export const updateVoteCount = (id, vote) => {
return axios.patch(`book/${id}`, {
vote: vote,
});
};
Lambda:
import AWS from "aws-sdk";
import middy from "#middy/core";
import httpJsonBodyParser from "#middy/http-json-body-parser";
import httpEventNormalizer from "#middy/http-event-normalizer";
import httpErrorHandler from "#middy/http-event-normalizer";
const dynamodb = new AWS.DynamoDB.DocumentClient();
async function setBookVotes(event, context) {
const { id } = event.pathParameters;
const { vote } = event.body;
const params = {
TableName: process.env.BOOK_TABLE_NAME,
Key: { id },
UpdateExpression: "set vote = vote + :vote",
ExpressionAttributeValues: {
":vote": vote,
},
ReturnValues: "ALL_NEW",
};
let updatedVotes;
try {
const result = await dynamodb.update(params).promise();
updatedVotes = result.Attributes;
} catch (error) {
console.error(error);
throw new createError.InternalServerError(error);
}
return {
statusCode: 200,
body: JSON.stringify(updatedVotes),
};
}
export const handler = middy(setBookVotes)
.use(httpJsonBodyParser())
.use(httpEventNormalizer())
.use(httpErrorHandler());