0
570
Viewsno se puede obtener XSRF-TOKEN de la cookie en nextjs (Reactjs)
Creo un formulario de inicio de sesión usando Nextjs y backend con Laravel 8, genero un XSRF-TOKEN en Laravel y luego lo configuro en cookie, puedo ver el token dentro del elemento de inspección> pestaña de aplicación> sección de cookies, pero no puedo configurarlo mi solicitud de búsqueda para hacer mi inicio de sesión, uso redux para almacenar mis datos tales como: productos, autenticación, carrito, etc.
Código AuthAction.js :
export const LOGIN_AUTH = "LOGIN_AUTH"; export const LOGOUT_AUTH = "LOGOUT_AUTH"; export const HandleLogin = (data) => { return async (dispatch, getState) => { const getCsrf = await fetch("http://localhost:8000/sanctum/csrf-cookie"); if (!getCsrf.ok) { throw new Error("Faild to set csrf token"); } console.log("getCsrf", cookie.load("XSRF-TOKEN")); const response = await fetch("http://localhost:8000/api/app/user/login", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(data), }); if (!response.ok) { throw Error("Login faild"); } try { const responseData = await response.json(); console.log("login", responseData); dispatch({ type: LOGIN_AUTH, user: responseData, }); } catch (err) { console.log("Login err", err); throw err; } }; }; después console.log("getCsrf", cookie.load("XSRF-TOKEN")); no pasó nada. ¿Qué hago mal en mi código?
captura de pantalla de cookies:
solicitar respuesta: 
2 answers
Answer question0
Dado que sus aplicaciones next.js y laravel tienen diferentes orígenes, debe configurar fetch para enviar cookies explícitamente.
const response = await fetch("http://localhost:8000/api/app/user/login", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(data), credentials: 'include' }); Puede leer más sobre la propiedad de credentials en los documentos de MDN
Además, puede leer la cookie en el front-end si es una cookie http-only .
Además, no olvide configurar el uso compartido de recursos de origen cruzado en su aplicación de back-end.
0
Use axios en lugar de fetch .
Ejemplo:
axios .get("http://localhost:8000/sanctum/csrf-cookie", { withCredentials: true, }) .then((response) => { axios("http://localhost:8000/api/app/user/login", { method: "post", data: data, withCredentials: true, }) .then((response) => { console.log("login", response.data); }) .catch((error) => { console.log(error); }); }) .catch((error) => { // handle error console.log(error); }) .then(() => { // });