0
303
Views¿Cómo autenticarse correctamente en la solicitud posterior con fetch api?
Tengo un SpringBoot Backend con Spring Security habilitado en la configuración predeterminada (nada cambió allí).
Tengo el siguiente controlador de descanso y mapeo posterior:
@RestController public class MyController { @PostMapping(value = "/sm/resrc/pth") public Integer postSomething(@RequestParam String someValue,@RequestParam String userId){ System.out.println(String.format("SomeValue: %s from userid %s",someValue,userId)); return 0; } }- Crear una solicitud de publicación desde el siguiente formulario funciona bien:
<form method="post" th:action="@{/sm/resrc/pth}"> <input type="text" name="someValue"> <input type="text" name="userId"> <input type="hidden" name="_csrf" value="${_csrf.token}" /> <div><input type="submit" value="Send" /></div> </form>Incluso funciona sin el valor cors oculto.
- Sin embargo, necesito crear una solicitud de publicación desde JavaScript, que no funciona. La aplicación SpringBoot se ejecuta en localhost:8080 . Pensé que el parámetro de credenciales 'incluir' se usa para incluir los encabezados de autenticación requeridos, que el usuario ya ingresó correctamente para abrir la página dada. ¿Es esto correcto? También cambié el valor de 'mode' . Probé 'cors' , 'same-origin' y 'no-cors' . Simplemente no funciona. Eventualmente, no entiendo por qué cors es un problema de todos modos, ya que estoy solicitando un recurso del mismo origen. Ni siquiera funcionó después de agregar el encabezado de Autorización manualmente a la solicitud sin usar el parámetro de credenciales. Como puede ver en la imagen, siempre obtengo el estado 403. ¿Qué tiene de malo mi pedido? ¿Qué me estoy perdiendo?
let data = { "some":"abc", "values":this.localDescription, "userId":userId }; fetch("sm/resrc/pth", { method: 'POST', credentials: 'include', mode: 'cors', body: data } ).then(response => console.log(response)); 
2 answers
Answer question0
CORS es una característica de seguridad; Así que probablemente no quieras deshabilitarlo u omitirlo. Luché un poco para descubrir cómo incluir los encabezados correctamente, pero finalmente encontré la solución. Así lo resolví:
En el primer paso, agregué el CSRF-Header-name esperado y el token en sí mismo a los metadatos del archivo html generado. En primavera, usando el marco de trabajo de plantillas thyemleaf, se ve así:
<html lang="en"> <head> <meta name="_csrf_header_name" th:content="${_csrf.headerName}"/> <meta name="_csrf_token" th:content="${_csrf.token}"/> </head> . . . </html>Lo que resulta en algo como eso:
<meta name="_csrf_header_name" content="X-CSRF-TOKEN"> <meta name="_csrf_token" content="14d98c88-8643-1234-5678-39473aa7890e">Cuando se crea la solicitud de recuperación, los valores del nombre del encabezado y el token en sí se leen de las metaetiquetas. De esa manera, el encabezado csrf se ve exactamente como el servidor espera que sea. Esa fue la razón principal por la que luché con la solicitud. No sabía que estaba nombrando mal el nombre del encabezado del token. El encabezado/nombre de token esperado puede variar de un servidor a otro, supongo; y por lo tanto puede ser diferente dependiendo de su Backend.
getCsrfToken(){ return document.querySelector('meta[name=_csrf_token]').content; } getCsrfTokenName(){ return document.querySelector('meta[name=_csrf_header_name]').content; } let csrfToken = this.getCsrfToken(); let csrfTokenName = this.getCsrfTokenName(); fetch('sm/resrc/pth', { method:'post', headers: new Headers([[csrfTokenName, csrfToken]]) }).then(res =>{console.log(res);});}0
Encontré el mismo problema al hacer un ejemplo de inicio de sesión con jax-rs. En mi caso, el problema fue que al agregar las 'credenciales': 'incluir' a la solicitud, en el lado de la API Rest Service, es necesario configurar en el CORS Filtrar el encabezado de:
response.addHeader("Access-Control-Allow-Origin", "*");a:
res.addHeader("Access-Control-Allow-Origin", "http://localhost");Donde "http://localhost es el origen de mi solicitud.
Encontré información al respecto en esta publicación: No hay un encabezado 'Access-Control-Allow-Origin' en el recurso solicitado, cuando intento obtener datos de una API REST