Tengo un problema al enviar una solicitud POST a un servidor backend (administrado por Swagger UI). A continuación se muestra el fragmento de código de la función POST:

 const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); const employee: IEmployee = { age: newEmployeeData.age, id: newEmployeeData.id, name: newEmployeeData.name, position: newEmployeeData.position, }; axios .post("http://34.140.193.23/api/employees", JSON.stringify(employee), { headers: { "Content-Type": "application/json", }, }) .then((res) => setEmployeesData([...employeesData, res.data])) .catch((error) => { console.log("Error:", error); }); };

Cuando llamo a la función handleSubmit, me arroja un error a la consola como este:

 Failed to load resource: the server responded with a status of 400 () createError.js:16 Uncaught (in promise) Error: Request failed with status code 400 at createError (createError.js:16:1) at settle (settle.js:17:1) at XMLHttpRequest.onloadend (xhr.js:66:1)

Cuando intento depurar en el panel Fuentes en Chrome DevTools, ni siquiera devuelve el valor para la variable res. Para ser precisos, no ejecuta la declaración .then en absoluto.

Servidor back-end: http://34.140.193.23/swagger-ui/#/employee-controller

¿Me estoy perdiendo de algo? Muchas gracias por su ayuda.