Este es un programa de prueba ya que estoy aprendiendo a trabajar con JSON y tokens. El punto final es Python Flask. Parece funcionar bien, incluso lo que muestra en mi página está bien, solo veo el error en la consola.
Código:
function encodeUser(user, password) { var token = user + ":" + password; var hash = btoa(token); return "Basic " + hash; } function login(resultElement) { result = document.getElementById(resultElement) u = document.getElementById("email").value; p = document.getElementById("password").value; let xhr = new XMLHttpRequest(); let url = config_baseurl + "/login" xhr.open("POST",url,true); xhr.setRequestHeader("Content-Type","application/json"); xhr.setRequestHeader("Authorization", encodeUser(u, p)); xhr.onreadystatechange = function() { txt = this.responseText; respJson = JSON.parse(txt); result.innerHTML = 'response: ' + txt + '<br><br>token: ' + respJson.token; }; xhr.send(); }Los resultados se muestran como se esperaba en mi página:
response: { "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJwdWJsaWNfaWQiOiI3ODIxMDVjNi00ZWRhLTQyMjMtYmQ2Yy1hMDhmMzgzNWExZmUiLCJleHAiOjE2MzQ5MjA4NDR9.iHJQf3qGOJlWcSuw-itTk-IirUGUAnmtNKyUXBDnI0Y" }
ficha: eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJwdWJsaWNfaWQiOiI3ODIxMDVjNi00ZWRhLTQyMjMtYmQ2Yy1hMDhmMzgzNWExZmUiLCJleHAiOjE2MzQ5MjA4NDR9.iHJQf3qGOJitTkWcSu
La consola muestra este error.
Error de sintaxis no detectado: final inesperado de la entrada JSON en JSON.parse () en XMLHttpRequest.xhr.onreadystatechange (ejemplo.js:36)
¿Puedes probar con fetch/promises? La sincronización de las cosas con XMLHttpRequest es difícil. Sospecho que responseText en realidad no tiene un valor en el momento en que está decodificando el JSON
Algo como esto
function encodeUser(user, password) { const token = user + ":" + password; const encoded = btoa(token); // NOTE: Base64 is not hashing! return "Basic " + encoded; } function login(resultElement) { const result = document.getElementById(resultElement); const u = document.getElementById("email").value; const p = document.getElementById("password").value; const url = config_baseurl + "/login"; const init = { method: "POST", headers: { "Content-Type": "application/json", Authorization: encodeUser(u, p), }, }; fetch(url, init) .then(res => res.json()) .then(data => { console.log({ data }); result.innerText = data.token; }) .catch(console.error); }