Javascript 在ReactJs中使用NodeJS API登录失败

我正在使用Nodejs和Express会话在ReactJs中进行简单的用户登录。我的前端（React登录页面）无法工作，这是我遇到的问题。下面是我在Login.js中使用的获取API：

  SubmitLogin (event) {
    event.PreventDefault();
    debugger;
    fetch('http://localhost:4000/login', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type' : 'application/json'
      },
      body : JSON.stringfy (this.state)
    }).then((Response) => Response.json())
    .then((result) => {
      console.log(result);
      if (result.Status === 'Invalid')  
          alert('Invalid User');  
        else  
          this.props.history.push({Home});
            alert('Login Sucessfull');
    })
    console.log(this.state);
    alert("test input login")
  }

为了连接到后端，我添加了server.js，代码如下：

app.post('/login', jsonParser, (req, res) => {
    var username = req.body.username;
    var password = req.body.password;
    if (username && password) {
        dbConn.query(`SELECT * FROM user_tbl WHERE username = ? AND password = ?`, [username, password], (err, results, fields) => {
            if (results.length > 0) {
                req.session.loggedin = true;
                req.session.username = username;
        res.redirect('/home');
        console.log(results)
            } else {
                res.send('Incorrect Username and/or Password!');
            }           
            res.end();
        });
    } else {
        res.send('Please enter Username and Password!');
        res.end();
    }
});

app.get('/home', (req, res) => {
    if (req.session.loggedin) {
        res.send('Welcome back, ' + req.session.username + '!');
    } else {
        res.send('Please login to view this page!');
    }
    res.end();
});

我已经使用postman测试了后端，它正在工作。请帮助我提供一些建议，以及如何放置console.log以查找Login.js中的错误。谢谢你的帮助

《邮差》的结果是：

---

当您返回

text

而不是

json

时，将

Response.json（）

更改为

Response.text（）

，您可以添加

catch

块来处理错误

我可以在您的代码中看到，您在

邮递员

中使用

内容类型

应用程序/x-www-form-urlencoded

，在

获取

调用中使用

应用程序/json

。在两个请求中使用相同的

内容类型

SubmitLogin(event) {
    event.PreventDefault();
    fetch('http://localhost:4000/login', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringfy(this.state)
    }).then((Response) => Response.text())
    .then((result) => {
        console.log(result);
        if (result.Status === 'Invalid')
            alert('Invalid User');
        else
            this.props.history.push({ Home });
        alert('Login Sucessfull');
    }).catch(error => {
        console.error(error)
    })
    console.log(this.state);
    alert("test input login")
}

您可以将代码更改为使用

async/await

，以提高可读性

async SubmitLogin(event) {
    event.PreventDefault();
    try {
        let response = await fetch('http://localhost:4000/login', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringfy(this.state)
        });
        let result = await  response.text();
        console.log(result);
        if (result.Status === 'Invalid')
            alert('Invalid User');
        else
            this.props.history.push({ Home });
        alert('Login Sucessfull');
    } catch (error) {
        console.error(error.message);
    }
    console.log(this.state);
    alert("test input login")
}

---

是的，我两者都用过。我仍然无法在控制台中捕捉到错误。在浏览器的inspect元素中，我只得到了这个等待WDS更新信号的[HMR]。。。但我认为这不是问题是的，你是对的，我在《邮递员》中更改了内容类型，但出现了错误。我怎样才能解决这个问题让我们一起来。