Request a FastApi con JavaScript y Axios

Si te estás integrando a una Api con FastApi y Axios de javascript te explico aquí como utilizar el token generado en la Cookie de tus peticiones.

Es un framework para construir apis con Python, que nos permite generar una documentación rápidamente de nuestros servicios creados y permite realizar las pruebas de las peticiones una vez ejecutado el servidor.

Algo interesante que encontre al consumir unos servicios es la manera en la que se utiliza el token para las peticiones, como conocemos si utilizamos una autenticación oAuth2 de tipo Bearer esta la pasamos como header en las peticiones pero aquí la pasaremos como cookie.

Comencemos realizando una petición de token por lo general necesitamos usuario y contraseña y el tipo de credenciales en lo mas normal en este caso, creamos un archivo .js y le agregamos la librería axios. Vamos a solicitar nuestro token el siguiente es una petición Post para solicitar un token.

src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">

const params = new URLSearchParams();params.append('username', user);params.append('password', password);let headers= {"Content-Type": "application/x-www-form-urlencoded","Accept" : "application/json"}axios.post('http://localhost:8001/login/access-token', params, headers).then(resp => {console.log(resp);}).catch((error) => {console.log(error);})

Lo que nos devolverá esta respuesta comúnmente es un JSON con parámetros de token y del tipo de token.

Ahora como ya tenemos el token el paso siguiente en algunos servicios es adjuntarlo como cabeceras o headers a la petición, digamos que queremos realizar una petición GET con la información del usuario. Normalmente realizaríamos lo siguiente:

let headers= {"Accept" : "application/json","Authorization": "Bearer " + nuestro_token,}axios.get('http://localhost:8001/user/data', null, headers).then(resp => {console.log(resp);}).catch((error) => {console.log(error);})

Pero sorpresa en este caso nos responde el servicio que no encuentra el Access Token, bueno si estás con las personas que hacen el backend cerca les puedes pedir ayuda viendo la trama que llega en caso de no estar cerca intentamos:

let headers= {"Accept" : "application/json","Cookie": 'access-token= "Bearer " + nuestro_token + ' " ',}axios.get('http://localhost:8001/user/data', null, headers).then(resp => {console.log(resp);}).catch((error) => {console.log(error);})

Pero seguimos teniendo el mensaje 401 de no autorizados. Entonces estaba realizando pruebas en postman solicitando el token y en otra pestaña consumiento el otro servicio y sin enviar cabeceras ni nada el servicio respondio correctamente, entonces como hizo eso postman, ahí encontré que tenemos que grabar el token en la cookie del browser y luego tenemos que decirle a Axios que lo utilice en la petición.

Comencemos grabando el token en la primera petición, agregamos al código superior lo siguiente:

document.cookie= 'access_token=Bearer '+ eltoken;

Luego en nuestra petición de axios vamos a modificar la petición:

axios.get('http://localhost:8001/users/data', {withCredentials: true}).then(resp => {}).catch((error) => {console.log(error);})

Y en el caso que queramos realizar una petición PUT utilicemos lo siguiente:

let data_send = { user : null }axios.defaults.withCredentials = trueaxios.put('http://localhost:8001/users/update', data_send).then(resp => {}).catch((error) => {console.log(error);})

Y listo con esto ya podemos realizar peticiones con axios enviando el token desde la Cookie, si tienes dudas o quieres asesoría en tus proyectos no dudes en contactarnos.