Quiero enviar un JWT con los datos de carga cuando el usuario haya iniciado sesión. Para obtenerlo, primero necesito usar el formulario de inicio de sesión. Cuando hago clic en el botón de inicio de sesión, se llama a la función login() para realizar la solicitud de publicación con los datos del formulario y espera la respuesta para recuperar el JWT, pero se muestra un error que indica que falta el encabezado CORS en la consola en la función de inicio de sesión "const json = esperar datos.json();". Sin embargo, puedo ver el token en la consola del desarrollador.
Luego, al usar el formulario de carga, el JWT debe enviarse como encabezado de autorización con las imágenes cargadas como cuerpo. Quiero lograr esto con javascript simple. Esto es lo que tengo hasta ahora:
<form id="loginform"> <input type="text" id="username" name="username" placeholder="Username"> <input type="password" id="password" name="password" placeholder="Password"> <input id="loginButton" type="submit"> </form> <form id="uploadform" enctype="multipart/form-data"> <input type="file" id="images" name="images" multiple data-max="5" accept="image/jpg, image/jpeg, image/png" > <input id="sendImagesButton" type="submit"> </form> <script type="text/javascript"> const loginform = document.getElementById("loginform"); loginform.addEventListener('submit', login); async function login(event){ event.preventDefault(); const data = await fetch("http://localhost:8000/api/login", { method: "POST", body: new FormData(this) }); const json = await data.json(); alert("test jwt retrieved"); localStorage.setItem("token", json.access_token); } const pdfform = document.getElementById("uploadform"); pdfform.addEventListener('submit', convert_to_pdf); function convert_to_pdf(event){ event.preventDefault(); const res = await fetch("http://localhost:8000/api/convert_to_pdf", { method: "POST", headers: { 'Content-Type': 'multipart/form-data', 'Authorization': ' Bearer ' + localStorage.getItem("token") }, body: new FormData(this) }); } </script>Por lo que puedo ver (no tanto), puedo decir que el proceso de autenticación con JWT debería ser:
Ahora que tiene acceso al token en el lado del cliente, puede guardarlo en el almacenamiento local o de sesión ( localStorage o sessionStorage ).
Otra opción sería enviar el token en cada solicitud a través de cookies. Realmente depende de ti.
EDITAR: una vez que recupere el token de la solicitud de inicio de sesión y lo guarde en el almacenamiento, lo tendrá disponible desde cualquier parte del código del cliente, sin embargo, la única forma de enviarlo al servidor a través del formulario de actualización (excepto usando una entrada oculta ) sería, en el script:
document.querySelector('#uploadform').addEventListener('submit', e => { // here you can access and manage your form value and also of course access the token value // to send it to client you can use something like axios so you would do e.preventDefault(); // that prevent the form to send its request // now send you request manually with your data for eg axios.post('http://localhost:8000/api/convert_to_pdf', /* your data here */) })La acción predeterminada del navegador para el envío de formularios mediante POST es representar el contenido de la respuesta. Si no es el comportamiento deseado, deberá realizar la solicitud de JS manualmente, por ejemplo, utilizando el atributo onsubmit .
Encontré un tutorial sobre eso en el sitio de desarrolladores de Mozilla .
Además, tendrá que almacenar JWT en algún lugar, tal vez en el almacenamiento local , cuando lo vuelva a leer y lo agregue al encabezado de Authorization en la próxima solicitud, también se realiza a través de JS y no del envío estándar del navegador.