I am building an events app with nextJS and strapi. I am trying to make a POST request to strapi using nextJS on my local machine, to make a new entry to my events collection. However, I keep getting a 400 Bad Request status when making the request. I am making the request on my local machine from http://localhost:3000 to the strapi server at http://localhost:1337/api/events. The request works successfully with postman.
Environment details:
This is my code for handling the form submission to the strapi api:
const res = await fetch("http://localhost:1337/api/events", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
data: {
name: "test",
description: "test",
venue: "test",
address: "test",
performers: "test",
time: "test",
date: "2023-01-12",
},
}),
});
I made the permissions public and I'd also tried to solve this by configuring the strapi middleware for CORS which looks like this:
module.exports = [
// ...
{
name: "strapi::cors",
config: {
enabled: true,
headers: "*",
origin: ["http://localhost:3000", "http://localhost:1337"],
},
},
// ...
];
Even after doing this I keep getting the same Response, 400 Bad Request with a message: "Missing \"data\" payload in the request body". Am I missing something or is the body format incorrect?
This is my first time using strapi, and I found the above from the strapi documentation. How do I solve this issue, I have been stuck on this for a week now, please help.
I found a solution to my question, I had to create a slug system since my events collection had a slug field. I fixed this using a lifecycle hook to create the slug field with the use of the slugify library, which in turn solved this error(Validation Error).