请求正文为空，同时使用 Angular 提交表单答案

【问题标题】：Request body is empty, while submitting a form using Angular请求正文为空，同时使用 Angular 提交表单
【发布时间】：2021-02-22 06:49:01
【问题描述】：

我正在尝试创建一个以 mongodb 作为后端数据库的 Angular 应用程序。我使用 Reactive Forms 创建了表单。但是，每当我提交表单以将数据发布到 mongo 时，console.log 中的正文都是空的。我在这里附上我的代码。我已经尝试了很多，但是错误仍然存在。请帮忙。

这是我的 app.js 文件。

const path = require('path');
const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');

mongoose.set('useNewUrlParser', true);
mongoose.set('useFindAndModify', false);
mongoose.set('useCreateIndex', true);

mongoose.connect("mongodb://localhost:27017/node-angular", { useUnifiedTopology: true })
  .then(() => {
    console.log('Connected to database!');
  })
  .catch(() => {
    console.log('connection failed!');
  });

const app = express();

app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
app.use("/images", express.static(path.join("backend/images"))); // allows to access the /images static contents folder

app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
  res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, PATCH, DELETE, OPTIONS");
  next();
});

const postsRoutes = require('./routes/posts');
const userRoutes = require('./routes/user');
const dprRoutes = require('./routes/dprs');
const atlasRoutes = require('./routes/atlas');
const acqProjectRoutes = require('./routes/acqproject');

app.use("/api/posts", postsRoutes);
app.use("/api/user", userRoutes);
app.use("/api/dprs", dprRoutes);
app.use("/api/atlas", atlasRoutes);
app.use("/api/apc", acqProjectRoutes);

module.exports = app;

错误在于 acqProjectRoutes 路由。所有其他路线都运行良好。

以下是我的 acqproject.js 路由文件。

const express = require('express');
const AcqProjectController = require('../controllers/acqproject');
const checkAuth = require('../middleware/check-auth');
const router = express.Router();

router.post("", checkAuth,  AcqProjectController.createAcqProject);

module.exports = router;

以下是分别对应的controller和model文件。

const AcqProject = require('../models/acqproject');

exports.createAcqProject = (req, res, next) => {
  const url = req.protocol + '://' + req.get("host");
  console.log(url);
  console.log(req.body);
  const acqProject = new AcqProject({
    area: req.body.area,
    contract: req.body.contract,
    vessel: req.body.vessel,
    contractor: req.body.contractor,
    start_date: new Date(req.body.start_date),
    end_date: new Date(req.body.end_date),
    mob_start_date: new Date(req.body.mob_start_date),
    mob_end_date: new Date(req.body.mob_end_date),
    volume: +req.body.volume,
    source_interval: +req.body.source_interval,
    sail_line_interval: +req.body.sail_line_interval,
    streamer_length: +req.body.streamer_length,
    receiver_interval: +req.body.receiver_interval,
    shot_point_interval: +req.body.shot_point_interval,
    source_array: +req.body.source_array,
    streamers: +req.body.streamers,
    record_length: +req.body.record_length,
    prime: +req.body.prime,
    infill_cap: +req.body.infill_cap,
    prefix: req.body.prefix,
    direction: JSON.parse(req.body.direction),
    streamer_profile: JSON.parse(req.body.streamer_profile),
    planned_completion_days: +req.body.planned_completion_days,
    creator: req.userData.userId
  });
  acqProject.save().then(createdAcqProject => {
    res.status(201).json({
      message: 'AcqProject added successfully.',
      acqProject: {
        ...createdAcqProject,
        id: createdAcqProject._id
      }
    });
  })
  .catch(error => {
    res.status(500).json({
      message: 'AcqProject creation failed.'
    });
  });
}

集合的模型如下：

const mongoose = require('mongoose');

const acqProjectSchema = mongoose.Schema({
  area: { type: String },
  contract: { type: String },
  vessel: { type: String },
  contractor: { type: String },
  start_date: { type: Date },
  end_date: { type: Date },
  mob_start_date: { type: Date },
  mob_end_date: { type: Date },
  volume: { type: Number },
  source_interval: { type: Number },
  sail_line_interval: { type: Number },
  streamer_length: { type: Number },
  receiver_interval: { type: Number },
  shot_point_interval: { type: Number },
  source_array: { type: Number },
  streamers: { type: Number },
  record_length: { type: Number },
  prime: { type: Number },
  infill_cap: { type: Number },
  prefix: { type: String },
  direction: { x: { type: Number }, y: { type: Number } },
  streamer_profile: { type : Array , "default" : [] },
  planned_completion_days: { type: Number },
  creator: { type: mongoose.Schema.Types.ObjectId, ref: "User", required: true }
});

module.exports = mongoose.model('AcqProject', acqProjectSchema);

我的服务文件中的以下 is 函数，它应该将 AcqProject 添加到数据库中。我检查了多次，数据记录正常。

addAcqProject(area: string, contract: string, vessel: string, contractor: string, start_date: Date, end_date: Date, mob_start_date: Date, mob_end_date: Date, volume: number, source_interval: number, sail_line_interval: number, streamer_length: number, receiver_interval: number, shot_point_interval: number, source_array: number, streamers: number, record_length: number, prime: number, infill_cap: number, prefix: string, direction: { x: number, y: number }, streamer_profile: [string], planned_completion_days: number) {
    const acqProjectData = new FormData();
    acqProjectData.append("area", area);
    acqProjectData.append("contract", contract);
    acqProjectData.append("vessel", vessel);
    acqProjectData.append("contractor", contractor);
    acqProjectData.append("start_date", start_date.toISOString());
    acqProjectData.append("end_date", end_date.toISOString());
    acqProjectData.append("mob_start_date", mob_start_date.toISOString());
    acqProjectData.append("mob_end_date", mob_end_date.toISOString());
    acqProjectData.append("volume", volume.toString());
    acqProjectData.append("source_interval", source_interval.toString());
    acqProjectData.append("sail_line_interval", sail_line_interval.toString());
    acqProjectData.append("streamer_length", streamer_length.toString());
    acqProjectData.append("receiver_interval", receiver_interval.toString());
    acqProjectData.append("shot_point_interval", shot_point_interval.toString());
    acqProjectData.append("source_array", source_array.toString());
    acqProjectData.append("streamers", streamers.toString());
    acqProjectData.append("record_length", record_length.toString());
    acqProjectData.append("prime", prime.toString());
    acqProjectData.append("infill_cap", infill_cap.toString());
    acqProjectData.append("prefix", prefix.toString());
    acqProjectData.append("direction", JSON.stringify(direction));
    acqProjectData.append("streamer_profile", JSON.stringify(streamer_profile));
    acqProjectData.append("planned_completion_days", planned_completion_days.toString());
 
    this.http
      .post<{ message: string; acqProject: AcqProject }>(
        BACKEND_URL,
        acqProjectData
      )
      .subscribe(responseData => {
        this.router.navigate(["/"]);
      });
  }

以下是服务器的控制台日志，我是用nodemon监控的。我很困惑为什么正文会像 {} 一样变空（在记录 url 之后）。

> mean-course@0.0.0 start:server /home/bhanu/mean-course
> nodemon server.js

[nodemon] 2.0.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node server.js`
Connected to database!
http://localhost:3000
{}
SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)
    at exports.createAcqProject (/home/bhanu/mean-course/backend/controllers/acqproject.js:28:21)
    at Layer.handle [as handle_request] (/home/bhanu/mean-course/node_modules/express/lib/router/layer.js:95:5)
    at next (/home/bhanu/mean-course/node_modules/express/lib/router/route.js:137:13)
    at module.exports (/home/bhanu/mean-course/backend/middleware/check-auth.js:8:5)
    at Layer.handle [as handle_request] (/home/bhanu/mean-course/node_modules/express/lib/router/layer.js:95:5)
    at next (/home/bhanu/mean-course/node_modules/express/lib/router/route.js:137:13)
    at Route.dispatch (/home/bhanu/mean-course/node_modules/express/lib/router/route.js:112:3)
    at Layer.handle [as handle_request] (/home/bhanu/mean-course/node_modules/express/lib/router/layer.js:95:5)
    at /home/bhanu/mean-course/node_modules/express/lib/router/index.js:281:22
    at Function.process_params (/home/bhanu/mean-course/node_modules/express/lib/router/index.js:335:12)
    at next (/home/bhanu/mean-course/node_modules/express/lib/router/index.js:275:10)
    at Function.handle (/home/bhanu/mean-course/node_modules/express/lib/router/index.js:174:3)
    at router (/home/bhanu/mean-course/node_modules/express/lib/router/index.js:47:12)
    at Layer.handle [as handle_request] (/home/bhanu/mean-course/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/home/bhanu/mean-course/node_modules/express/lib/router/index.js:317:13)

请帮忙。提前致谢。

【问题讨论】：

标签： node.js angular mongodb express

【解决方案1】：

所以对我来说，direction 或 streamer_profile 似乎是未定义的，因为位置 0 处的意外“u”是字符串“未定义”的第一个字母。所以我建议检查这些变量的有效性。

但是你为什么不把整个对象以 JSON 格式传递给你的后端呢？我认为这会让事情变得更容易。

【讨论】：

也检查过了。这两个变量都可以正常记录。
根据错误日志，错误发生在controllers/acqproject.js:28:2，你已经在那个特定位置查看过这些变量了吗？
在我的服务文件的函数 addAcqProject() 中，我在控制台记录了附加到 FormData 数组 (acqProjectData) 前后的所有变量。他们记录得很好。正是在这个函数中，我调用了后端的 post 方法。在那里，我得到 req.body 为空。在浏览器的开发者控制台中也显示 500（内部服务器错误）。
在 controllers/acqproject.js 中，req.body 为空。如何检查那里的值？
我猜这是问题的原因，你能发布你的服务器日志吗？