Estoy tratando de enviar algunos datos de formulario a una aplicación de primavera usando Fetch API en javascript. Tengo este código para enviar los datos del formulario:
document.querySelector('#formPet').addEventListener('submit', event => { event.preventDefault(); let email= document.querySelector("#email"); fetch('http://localhost:8080/petForm/'+email.value+'/pets', { method: 'POST', body: JSON.stringify({ help: "helpme:(" }) }) });
pero recibo un error de estado 415 "Tipo de medio no compatible". Incluso cuando configuro específicamente el encabezado 'Tipo de contenido' en 'aplicación/json', se envía como 'texto/simple'
fetch('http://localhost:8080/petForm/'+email.value+'/pets', { method: 'POST', header: { 'Content-Type': 'application/json' }, body: JSON.stringify({ help: "helpme:(" }) }) });
esta es la respuesta que recibo del servidor:
Aquí está el método que acepta la solicitud en Spring:
@PostMapping("petForm/{id}/pets") public ResponseEntity<Pet> createPet(@PathVariable("id") String ownerId, @RequestBody Map<String, Object> data){ System.out.println(data); return ResponseEntity.ok().build(); }
No sé por qué la solicitud se envía en formato 'texto/sin formato', pruebo el método Spring en cartero y funciona bien cuando envío los datos en formato json.
En su código JavaScript, debe usar "encabezados" en lugar de "encabezado". Consulte la documentación de la API de recuperación: https://developer.mozilla.org/en-US/docs/Web/API/fetch
step 1 : add @CrossOrigin after @PostMapping(value = "petForm/{id}/pets") like : @PostMapping(value = "petForm/{id}/pets") @CrossOrigin public ResponseEntity<String> createPet(@PathVariable("id") String ownerId, @RequestBody Map<String, Object> data){ System.out.println(data); return ResponseEntity.ok().build(); } step 2 : add double quotes to help word it is not json fromat :====> help: "helpme" Correct : it is not json fromat :====> "help": "helpme"