Estoy usando una API para que mi página de inicio de sesión valide el usuario y la contraseña con este código:

 function ola() { var myHeaders = new Headers(); myHeaders.append("Content-Type", "text/plain"); //WITH USERNAME AND PASSWORD LIKE THIS VVVVVV var raw = "{\r\n \"password\": \"Olasou1!\",\r\n \"username\": \"bernardo\"\r\n}\r\n"; var requestOptions = { method: 'POST', headers: myHeaders, body: raw, redirect: 'follow' }; fetch("https://api.secureme.pt/api/v1/auth/login", requestOptions) .then(response => response.text()) .then(result => console.log(result)) .catch(error => console.log('error', error)); };

Recibo un mensaje de éxito, así que sé que funcionó

Pero cuando trato de usar las entradas del usuario en la variable raw de esta manera:

 function ola() { var user = document.getElementById("user").value; var password = document.getElementById("password").value; var myHeaders = new Headers(); myHeaders.append("Content-Type", "text/plain"); var raw = { password: password, username: user }; var requestOptions = { method: 'POST', headers: myHeaders, body: raw, redirect: 'follow' }; fetch("https://api.secureme.pt/api/v1/auth/login", requestOptions) .then(response => response.text()) .then(result => console.log(result)) .catch(error => console.log('error', error)); };

Y cuando pongo el mismo nombre de usuario y contraseña, aparece un error que dice que no se pudo obtener:

 error TypeError: Failed to fetch at ola (:5500/js/loginRegister.js:36:3) at HTMLButtonElement.onclick (loginRegister.html:22:74)

No puedo entender por qué, ¿alguien puede ayudarme con esto?

Aquí es donde llamo a la función en el archivo html :

 <button type="submit" class="submit-btn" onclick="ola()">Log In</button>