Express 后端在从 Angular 5 个 App 传递时丢弃数据

Question

我正在构建一个小的演示应用程序，以使用 Node Mailer 从表单发送电子邮件。我已将 Angular 5 应用程序连接到 Express 4 后端。我运行非常简单，在我的项目中有一个 server.js express 文件引用 angular dist 文件。然后我构建 angular 应用程序和运行服务器。

一切正常，甚至可以发送电子邮件，但快递后端不知何故丢失了数据（或者我只是没有正确访问它）。电子邮件随 "undefined" 一起发送到我尝试使用数据的任何地方。

我填写了姓名、phone、电子邮件和地址的表单字段。然后我将数据拉入服务并将其发送到后端。这是我在 Angular 中发送数据的服务：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class ClientService {
    headers: any;
    clientInfo = '';

    constructor(private http: HttpClient) { }

    sendEmail(clientData) {
        console.log(clientData);
        return this.http.post('/send-email', clientData);
    }
}

当我发送此 http post 时，它看起来不错。请求url正确，header为application/json，payload数据正确：{name:"John Doe", email:"john@johndoemail.com",phone：“18005555555”，消息："test"}

这是我的 server.js：（在有效的 gmail 帐户信息中有 x 的子）

 // Get dependencies
const express = require('express');
const nodemailer = require("nodemailer");
const path = require('path');
const http = require('http');
const bodyParser = require('body-parser');

const app = express();
const port = 4300;

// Start server
app.listen(port, function(req, res) {
    console.log('Server is running at port: ', port);
})

// Point static path to dist
app.use(express.static(path.join(__dirname, 'dist')));

// Home route to serve the index file
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/index.html'));
});

// Parsers for POST data
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.post('/send-email', function (req, res) {
    console.log(req.body);

    let transporter = nodemailer.createTransport({
        host: 'smtp.gmail.com',
        port: 465,
        secure: true,
        auth: {
            user:'xxxxxx@gmail.com',
            pass: 'xxxxxxxx',
        }
    });

    let message = {
        from: 'mailer@nodemailer.com',
        to: 'xxxxx@gmail.com',
        subject: 'New Client Message ' + req.body.name,
        text: 'Name: ' + req.body.name + '\nEmail: ' + req.body.email + '\nPhone: ' + req.body.phone + '\n    ' + req.body.message,
        html: '<p>' + req.body.message + '</p>'     
    };

    transporter.sendMail(message);
    res.json(req.body);
});

在服务器控制台中 req.body 显示为“{}”。使用我自己的电子邮件，我收到了一条从 nodemailer 发送的消息，但是所有使用的数据都只是说 "undefined".

我需要以不同的方式访问数据吗？也许使用另一个属性请求？无论如何，问题似乎出在我的 express 文件中，所以如果您在那里看到任何问题，请告诉我。

Answer 1

我找到了解决方案。我没有用我的 post 数据实现 header。我将这些更改添加到我的服务并解决了问题：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Injectable()
export class ClientService {
    httpHeader = {
        headers: new HttpHeaders({
            'Content-Type': 'application/json',
        })
    };

    constructor(private http: HttpClient) { }

    sendEmail(clientData) {
        console.log(clientData);
        this.http.post('/send-email', clientData, this.httpHeader);
    }
}

如果您想查看完整的演示，请看这里：https://github.com/xTumulus/NodeMailer_AngularExpress_Demo

Express 后端在从 Angular 5 个 App 传递时丢弃数据

Express backend dropping data when passed from Angular 5 App

node.js

express

nodemailer

angular