title: fetch post with log-in form returns server error 400 with invalid credentials
body: <p>I am a newbie to Javascript.</p>
  <p>I built an html log-in form and a javascript code that uses fetch POST request to send the form info to the login API. (I already confirmed that the API works correctly on postman.)</p>
  <p>I am getting two different types of errors.</p>
  <ol>
  <li>When I enter a complete email address and password info that already exist in the db, I get</li>
  </ol>
  <pre><code>&quot;TypeError: failed to fetch&quot;
  </code></pre>
  <p>In this case, the page reloads and all the messages in my browser console also gets reset.</p>
  <ol start="2">
  <li>When I enter a false info in the form, I get HTTP 400 BAD Request error and the message</li>
  </ol>
  <pre><code>&quot;error&quot;: &quot;invalid credentials&quot;
  </code></pre>
  <p>Looking for a kind advice. Thank you very much in advance.</p>
  <p>Fetch request code:</p>
  <pre class="lang-js prettyprint-override"><code>function signIn() {
      let form = $('#form_login');
      let fd = new FormData(form[0]);
      let data = {}
      for (let [key, prop] of fd) {
          data[key] = prop;
      }
      input_login = JSON.stringify(data, null, 2);
  
      const jsonHeaders = new Headers();
      jsonHeaders.append('Content-Type', 'application/json');
      
      let requestOptions = {
          method: 'POST',
          headers: jsonHeaders,
          mode: 'cors',
          body: input_login,
          redirect: 'follow'
      }
  
      fetch('http://{{ API address in AWS EC2 host instance }}', requestOptions)
      .then(res =&gt; res.json())
      .then(res =&gt; {
          console.log(res);
          localStorage.setItem('access-token', res.jwt_token);
      })
      .catch((err) =&gt; { console.error(err); });
  }
  </code></pre>
  <p>HTML Form code:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;form id=&quot;form_login&quot;&gt;
      &lt;div class=&quot;form-group&quot;&gt;
          &lt;label for=&quot;inputEmail&quot;&gt;Email address&lt;/label&gt;
          &lt;input class=&quot;form-control&quot; type=&quot;email&quot; id=&quot;email&quot; name=&quot;email&quot; placeholder=&quot;Enter Email&quot; autofocus=&quot;&quot;&gt;
      &lt;/div&gt;
      &lt;div class=&quot;form-group&quot;&gt;
          &lt;label for=&quot;inputPassword1&quot;&gt;Password&lt;/label&gt;
          &lt;input class=&quot;form-control&quot; type=&quot;password&quot; id=&quot;password&quot; name=&quot;password&quot; placeholder=&quot;Password&quot;&gt;
      &lt;/div&gt;
      &lt;div class=&quot;form-check&quot;&gt;
          &lt;input type=&quot;checkbox&quot; class=&quot;form-check-input&quot; id=&quot;rememberCheck1&quot;&gt;
          &lt;label class=&quot;form-check-label&quot; for=&quot;rememberCheck1&quot;&gt;Remember me&lt;/label&gt;
      &lt;/div&gt;
      &lt;button class=&quot;btn btn-primary btn-block mt-2 mb-2&quot; onclick=&quot;signIn();&quot;&gt;Login&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  <p>Many thanks!</p>