时间戳

首页 > 解决方案 > “是什么导致对我的简单节点发布请求的这种‘不正确的表单提交’响应？”

node.js - “是什么导致对我的简单节点发布请求的这种‘不正确的表单提交’响应？”

问题描述

为我稍后要构建的应用程序制作注册页面。刚刚创建了一个简单的 as can be 节点服务器，它在端口 3000 上运行。我创建了一个带有简单表单界面的 React 应用程序，在端口 3001 上运行。用户填写表单并点击注册按钮，这应该发送一个电子邮件和密码到 /register 的发布路径。

但我每次都收到“不正确的表单提交”。它看起来只是网络窗格“{email：dummy@email，密码：123}”中的一个json对象，所以我不确定这意味着什么......

onSubmitRegister = () => {
    fetch('http://localhost:3000/register', {
      method: 'post',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        email: this.state.email,
        password: this.state.password
      })
    })
    .then(response => response.json())
    .then(data => console.log(data));
  }

节点服务器如下所示：

const express = require("express");
const bodyParser = require("body-parser");

const app = express();
app.use(express.static("public"));
app.use(bodyParser.urlencoded({extended: true}));

app.get("/", (req, res) => {
    res.send("Hello");
})

app.post("/register", (req, res) => {
    console.log(req.body);
})

app.listen(3000, () => {
    console.log("Server started on port 3000");
});

现在，我只希望它在控制台记录 req.body，所以在我继续构建 MongoDB 数据库并开始将文档添加到集合之前，我知道一切正常。Stack Overflow 和我搜索过的其他论坛主题建议检查标题是否正确。这对我来说看起来不错。我错过了什么吗？

编辑：这就是表单的样子，整个渲染功能：

  render(){
    return(
      <div>
      <div className="text-center">
        <form className="form-signin">
          <h1 className="h3 mb-3 font-weight-normal">Ohaii Sign Up</h1>
          <label for="inputEmail" className="sr-only">Email address</label>
            <input
              type="email"
              id="inputEmail"
              className="form-control"
              placeholder="Email address"
              required=""
              autofocus=""
              onChange={this.onEmailChange}
            />
          <label for="inputPassword" className="sr-only">Password</label>
          <input
            type="password"
            id="inputPassword"
            className="form-control"
            placeholder="Password"
            required=""/>
          <label for="inputPassword" className="sr-only">Password</label>
          <input
            type="password"
            id="confirmPassword"
            className="form-control"
            placeholder="Confirm Password"
            required=""
            onChange={this.onPasswordChange}
          />
          <div className="btn btn-block btn-social btn-google" style={{'color': '#fff'}}>
            <span className="fa fa-google"></span> Sign Up with Google
          </div>
          <div className="btn btn-block btn-social btn-facebook" style={{'color': '#fff'}}>
            <span className="fa fa-facebook"></span> Sign Up with Facebook
          </div>
          </form>
      </div>
      <button
        onClick={this.onSubmitRegister}
        className="btn btn-lg btn-primary btn-block"
      >Register</button>
      </div>
    )
  }

标签： node.jsreactjsfetch

解决方案

当您发送 JSON 数据时（您的正文是 JSON 并且您正在设置 JSON 内容类型），我建议将 bodyParser 中间件更改为：

app.use(bodyParser.json());

至少，在我的快速测试中，我能够从浏览器发送数据并在服务器上看到它。bodyParser.urlencoded但是，情况并非如此，我没有得到与您相同的错误。

此外，您应该从服务器返回一些响应，例如，我使用：

app.post("/register", (req, res) => {
  console.log(req.body);
  res.end("{}");
});

推荐阅读