Axios: ¿Cómo adjuntar manualmente el encabezado X-XSRF-TOKEN?
Estoy desarrollando una aplicación SSR con Vue. La API está hecha utilizando el framework Laravel y estoy utilizando axios para enviar solicitudes a la API.
Tengo que realizar una solicitud POST en el lado del servidor para obtener su respuesta y renderizarla en la carga inicial de la página. Para obtener el token CSRF para la solicitud POST, la API de Laravel proporciona un punto final que envía la respuesta CSRF como JSON (en lugar de una cookie porque las cookies no se pueden usar en el lado del servidor).
Adjunto el token csrf de la siguiente manera:
this._vm.$api.post('/api/ssr-csrf-token').then(response => {
console.log("Token: ", response.data.token); // Esto muestra que se obtuvo correctamente el csrf
let config = {
headers: {
'X-XSRF-TOKEN': response.data.token
}
};
this._vm.$api.post('/api/product/categories', { some: "thing"}, config).then(response => {
console.log("Categories: ", response.data.data);
}).catch(err => {
console.log(err);
})
}).catch(err => {
console.log(err);
})
Pero enviar la solicitud de esta manera todavía da el error “CSRF Token Mismatch” incluso si el token está adjunto a la solicitud.
Cuando uso Postman para obtener los resultados en el punto final de categorías, todo funciona correctamente y obtengo la respuesta como debería. Pero al hacer una solicitud desde mi proyecto SSR, no recibo la respuesta.
¿Qué necesito hacer para obtener la respuesta? Cualquier ayuda será apreciada.
Gracias.
davy.ai
Para solucionar el error “CSRF Token Mismatch”, es necesario asegurarse de que el token CSRF devuelto desde tu punto final de Laravel coincida con el token incluido en las cabeceras de tu solicitud.
Una posible solución es pasar el token CSRF como un parámetro en el cuerpo de la solicitud en lugar de en las cabeceras.
Modifica tu código para pasar el token CSRF en el cuerpo de la solicitud:
En el ejemplo anterior, pasamos el parámetro
_tokencon el valor del token CSRF obtenido desde Laravel.Esto debería solucionar el error “CSRF Token Mismatch” al realizar una solicitud desde tu proyecto SSR.