Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
250 views
in Technique[技术] by (71.8m points)

Getting SyntaxError: Unexpected end of input upon sending a POST API fetch with JavaScript

Basically I am trying to send a post request with form data to validate user login. The data is sent however I can't get the actual JSON object to verify the user and move on to the next screen.

Here's the code:

async function userLogin() {
    
    let form = document.forms["loginForm"];
    let fd = new FormData(form);
    let data = {};
    for (let [key, prop] of fd) {
      data[key] = prop;
    }

    VALUE = JSON.stringify(data, null, 2);
    console.log("esto es: " + VALUE);

    const headers = new Headers();
    headers.append('Content-Type', 'application/json');
    headers.append('Accept', 'application/json');
    headers.append('Access-Control-Allow-Origin', '*');
    const init = {
        method: 'POST',
        headers,
        mode: 'no-cors',
        cache: 'default',
        body: VALUE
    }
    var username = document.getElementById("loginInput").value;
    var password = document.getElementById("passwordInput").value;
    

    const url = `http://banaccess.do/api/method/login?usr=${username}&pwd=${password}`;

    fetch(url, init)
    .then(data => data.json())
    .then(data =>  { console.log("Data: " + data) }) 
    .catch((err) => {
        console.error(err);
    });


   console.log("URL enviada " + url);
   console.log("Usuario: " + username + "
Contrase?a: " + password);
}
<!doctype html>
<html lang="es-DO">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" 
    integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <!-- Main CSS -->
    <link href="../resources/css/main.css" rel="stylesheet">
    <!-- Login CSS -->
    <link href="../resources/css/loginScreen.css" rel="stylesheet">

    <title>Reporte de comisiones</title>
  </head>
  <body>
    <div class="wrapper fadeInDown">
        <div id="formContent">
          <!-- Tabs Titles -->
      
          <!-- Icon -->
          <div class="fadeIn first">
            <img src="../resources/images/logo.png" id="icon" alt="User Icon" />
          </div>
      
          <!-- Login Form -->
          <form id="loginForm" name="loginForm" method="POST">
            <input type="text" id="loginInput" class="fadeIn second" name="loginInput" placeholder="Usuario" autocomplete="off">
            <input type="password" id="passwordInput" class="fadeIn third" name="passwordInput" placeholder="Contrase?a" autocomplete="off">
            <input type="button" class="fadeIn fourth" value="Iniciar Sesión" onclick="userLogin()">
          </form>
      
          <!-- Remind Passowrd -->
          <div id="formFooter">
            
          </div>
      
        </div>
      </div>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" 
    integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" 
    integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="../scripts/userLogin.js"></script>
  </body>
</html>
question from:https://stackoverflow.com/questions/65940746/getting-syntaxerror-unexpected-end-of-input-upon-sending-a-post-api-fetch-with

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
Waitting for answers

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...