Node.js 处理React和Express之间的路由请求

我正在使用React和Express创建一个具有登录和注册功能的应用程序。我正在使用Formik处理表单数据并将其发布：

> const initialValues={{username:"", email:"", password:""}}
onSubmit ={ async (values, { setSubmitting }) => {
  const value = values.username+'/'+values.email+'/'+values.password;
  const res = await fetch(`http://localhost:5000/newuser/${value}`, {
      method: 'GET',
      mode: 'cors',
      headers: {
          'Content-Type': 'application/json',
          'Access-Control-Allow-Origin': '*'
      }}).then(response => response.json());
      console.log(res);
      values = initialValues;
    setSubmitting(false);

}

然后通过以下路径将其发送到express应用程序：

> app.get('/newuser/:username/:email/:password', (req, res) => {
const username = req.params.username;
const email = req.params.email;
const password = req.params.password;
let sql = `Insert into users (username, useremail, userpass) values ('${username}', '${email}', '${password}')`;
query = db.query(sql, (err, results) => {
    if(err){throw err;}
    res.send("New user added you can login now");
});

}))

我可以将这些用户保存到数据库中，但是我对这段代码有以下两个问题，我可以从各种不同的视频、教程、问题和文档中拼凑出来：

关于这一行：

app.get（'/newuser/：username/：email/：password'，（req，res）

这是将表单数据转换为express的唯一方法，如果我不包含分号并使用req.params调用这些值，我会得到一个“404 not found error”因为这3个值是空的。如果我尝试通过req.body访问它们，它们看起来仍然是空的。我已经尝试将它们JSON.stringify，并且我正在express应用程序中使用body解析器。我的问题是如何访问这3个值（用户名、电子邮件、密码）使用req.body？例如，如果我想从我的浏览器访问此路由，是否有一种特定的格式化方法

我如何将响应发送回react应用程序，以告诉它例如用户存在且密码正确？我已经进行了mysql查询，检查此情况并在express中更新了一个变量，然后我只需要发送响应，可能是该变量的值，该变量将告诉react转到索引页。但是res。send（variable）似乎没有将变量发送到react，并且登录表单在提交后保持停滞状态

---

要访问正文，请使用

方法：“POST”

而不是GET

let response = await fetch(`http://localhost:5000/newUser`, {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(values),
    })

if (response.errors) {
   console.error(response.errors)
}

let responseJson = await response.json()

if (responseJson['message']) {
   console.log(responseJson['message'])
}

服务器端使用如下内容：

import cors from 'cors'

...

let app = express() 
    .use(cors())
    .post('/newUser', (req, res) => {
        let {username, email, password} = req.body
        ...
        // If all ok
        res.status(200).send({message: "User created"})

        // If there's an issue
        res.status(500).send({message: "oups"})
       })
    ...

---

要访问正文，请使用

方法：“POST”

而不是GET

let response = await fetch(`http://localhost:5000/newUser`, {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(values),
    })

if (response.errors) {
   console.error(response.errors)
}

let responseJson = await response.json()

if (responseJson['message']) {
   console.log(responseJson['message'])
}

服务器端使用如下内容：

import cors from 'cors'

...

let app = express() 
    .use(cors())
    .post('/newUser', (req, res) => {
        let {username, email, password} = req.body
        ...
        // If all ok
        res.status(200).send({message: "User created"})

        // If there's an issue
        res.status(500).send({message: "oups"})
       })
    ...

---

我有点困惑。你能将你的url字符串存储在一个变量和控制台中吗？将它记录在客户端代码中，以查看前端的url字符串是什么。和控制台。将你的req.body记录在服务器上。并准确地告诉我们每个人都记录了什么？嗨，Maiya，我现在已经解决了这个问题。谢谢，请查看Albert的回复。我有点困惑。您可以将url字符串存储在变量和控制台中吗？将其记录在客户端代码中，以查看前端的url字符串是什么。和控制台。将您的请求正文记录在服务器上。并准确地告诉我们每个人都记录了什么？嗨，Maiya，我已经解决了这个问题。谢谢，请参阅Albert的回复。非常感谢Albert，我的错误不是sp在fetch语句中指定了主体，并试图将其与提交的URL一起包含。现在，我可以从req.body中获得正确的值。问题的第二部分正常工作。我没有意识到res.send正在从express向我发送回复。我所需要做的就是将其转换为json，创建一个if语句检查json函数是否工作，然后将值分配给我的状态对象，这些对象可以在前端使用。是的，如果回答中不清楚，很抱歉-我可以突出显示第二个问题的内容。很高兴这有帮助：）非常感谢，我的错误是没有在fetch语句中指定主体，而是试图将其包含在提交的URL中。现在我可以从req.body中获得正确的值了。我的问题的第二部分开始工作了。我没有意识到res.send正在从express给我发送回复。我所需要做的就是将其转换为json，创建一个if语句，检查json函数是否工作，然后将值分配给我的状态对象，这些对象可以在前端使用。是的，如果回答中不清楚，很抱歉-我可以突出显示第二个问题的内容。很高兴这有帮助：）