«Что является причиной этого« неправильного представления формы »в ответ на мой простой запрос поста узла?»

Question

Создание страницы регистрации для приложения, которое я собираюсь создать позже.Только что создал простой сервер узлов, и он работает на порту 3000. Я создал приложение React с простым интерфейсом формы, работающим на порту 3001. Пользователь заполняет форму и нажимает кнопку регистрации, и это должно отправитьадрес электронной почты и пароль к почтовому маршруту / регистрации.

Но я каждый раз получаю "неправильное представление формы".Он выглядит как просто объект json на панели сети "{email: dummy @ email, password: 123}", поэтому я не уверен, что это значит ...

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 и начинать добавлять документы в коллекции.Переполнение стека и другие темы форума, которые я гуглил, предлагают проверить правильность заголовков.Это выглядит хорошо для меня.Я что-то упустил?

РЕДАКТИРОВАТЬ: Вот как выглядит форма, вся функция рендеринга:

  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>
    )
  }

Answer 1

Была проблема, специфичная для моей среды.Просто очистил кэш npm и это исправило.

Answer 2

Поскольку вы отправляете данные JSON (ваше тело - это JSON, а вы задаете тип содержимого JSON), я бы порекомендовал изменить промежуточное ПО bodyParser на:

app.use(bodyParser.json());

По крайней мере, в моем быстром тесте я смог отправить данные из браузера и увидеть их на сервере. С bodyParser.urlencoded это было не так, однако я не получил ту же ошибку, что и вы.

Кроме того, вы должны вернуть какой-то ответ с сервера, например, я использовал:

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