title: XHR failed loading: POST on AJAX request (in React)
body: <p>I don't think React has anything to do with this, but just in case, that's what I'm working in. I'm receiving the error <code>XHR failed loading: POST</code> when submitting an AJAX request to /login. I am trying to create a login route using Passport JS, and I know that the route is receiving the data because it will console.log as <code>{ email: 'myemail', password: 'mypassword' }</code> and <code>typeof</code> returns object.</p>
  
  <pre><code>this.handleLoginSubmit = () =&gt; {
    let xml = new XMLHttpRequest();
  
    xml.open("POST", "/login", true);
    xml.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
    xml.send(JSON.stringify({email: this.state.email, password: this.state.password}));
  
    xml.onreadystatechange = () =&gt; {
      if(xml.readyState === 4) {
        console.log('here')
        console.log(xml.response);
      }
    }
  }
  </code></pre>
  
  <p><strong>EDIT</strong> Here is the route:</p>
  
  <pre><code>router.post('/login', emailToLowerCase, function(req, res, next) {
  passport.authenticate('local', function(err, user, info) {
  if (err) {
    console.log('error')
    return next(err);
  }
  if (!user) {
    return console.log('no user!')
  }
  req.logIn(user, function(err) {
    if (err) return next(err);
    console.log('logging in')
    return res.send(req.user)
  });
  })(req, res, next);
  });
  </code></pre>
  
  <p><strong>EDIT</strong> Here is the form:</p>
  
  <pre><code>&lt;form id='login-form' className="small-form" className='nav-div' onSubmit={props.handleLoginSubmit}&gt;
  &lt;div className='nav-div'&gt;
    &lt;li className="nav-item"&gt;
        &lt;input type="email" required name="email" placeholder='Email' className='form-control' value={props.email} onChange={(e) =&gt; props.handleEmailChange(e.target.value)}/&gt;
    &lt;/li&gt;
    &lt;li className="nav-item"&gt;
        &lt;input type="password" required name="password" placeholder='Password' className='form-control' value={props.password} onChange={(e) =&gt; props.handlePasswordChange(e.target.value)}/&gt;
    &lt;/li&gt;
    &lt;li className='nav-item'&gt;
        &lt;input type='submit' value='Login' /&gt;
    &lt;/li&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>