0

Estou usando uma API para fazer minha página de login validar o usuário e a senha com este código:

function ola() {

var myHeaders = new Headers();

myHeaders.append("Content-Type", "text/plain");


//ESTA A RECEBER O USERNAME E PASSWORD ASSIM
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));

};

Eu recebo uma mensagem de sucesso logo eu sei que funcionou

Mas quando tento usar as entradas do usuario na variável raw assim:

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));

};

E quando eu coloco o mesmo nome de usuário e senha, eu recebo este erro:

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

Não consigo entender porquê, alguém me pode ajudar?

Aqui é onde eu chamo a funcao ola no ficheiro html:

<button type="submit" class="submit-btn" onclick="ola()">Log In</button>
3
  • 1
    No primeiro caso, em que diz que funciona, raw é uma string com conteúdo json, no segundo em que diz que não funciona, raw é um objeto literal, não seria o caso de converter esse objeto literal para string json?
    – Benilson
    Commented 24/05/2022 às 16:17
  • Não resultou, meti JSON.stringify(raw) no meu var requestOptions e deu o mesmo erro Commented 24/05/2022 às 16:27
  • Outra coisa que talvez seja um problema, pode ser a ausência do preventDefault no submit do form.
    – Benilson
    Commented 24/05/2022 às 16:35

1 Resposta 1

1

Utilizando um JSON.stringify(raw) funcionou. Veja

function ola() {
  let user = document.getElementById("user").value;
  let password = document.getElementById("password").value;
  let myHeaders = new Headers();
  myHeaders.append("Content-Type", "text/plain");
  let raw = {
      password: password,
      username: user
  };  
  let requestOptions = {
    method: 'POST',
    headers: myHeaders,
    body: JSON.stringify(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));

};
.form {
  width: fit-content;
  display: flex;
  flex-direction: column;
}
<div class="form">
  <input id="user" placeholder="User">
  <input id="password" type="password" placeholder="password">
  <button type="submit" class="submit-btn" onclick="ola()">Log In</button>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .