Я не думаю, что React имеет какое-то отношение к этому, но на всякий случай, что я работаю. Я получаю ошибку XHR failed loading: POST
при отправке запроса AJAX/login. Я пытаюсь создать логин, используя Passport JS, и я знаю, что маршрут получает данные, потому что он будет console.log как { email: 'myemail', password: 'mypassword' }
и typeof
возвращает объект.
this.handleLoginSubmit = () => {
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 = () => {
if(xml.readyState === 4) {
console.log('here')
console.log(xml.response);
}
}
}
EDIT Вот маршрут:
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);
});
EDIT Вот форма:
<form id='login-form' className="small-form" className='nav-div' onSubmit={props.handleLoginSubmit}>
<div className='nav-div'>
<li className="nav-item">
<input type="email" required name="email" placeholder='Email' className='form-control' value={props.email} onChange={(e) => props.handleEmailChange(e.target.value)}/>
</li>
<li className="nav-item">
<input type="password" required name="password" placeholder='Password' className='form-control' value={props.password} onChange={(e) => props.handlePasswordChange(e.target.value)}/>
</li>
<li className='nav-item'>
<input type='submit' value='Login' />
</li>
</div>
В вашем коде:
if (!user) {
return console.log('no user!')
}
Вы не отправляете никакого ответа на пользовательский интерфейс. Не знаете, как next(err)
обрабатывает ответ, но при аренде в случае, если user
не найден, вы хотите отправить некоторую ошибку обратно клиенту, например:
if (!user) {
console.log('no user!');
return res.status( 404 ).json({ message: 'User not found' });
}
fetch
если это возможно, я обнаружил, что интерфейсXMLHTTPRequest
меня сбивает с толку.fetch
намного проще в использовании. Если у вас все еще есть проблема сfetch
, я могу помочь отладить.