如何从 Angular 2 POST 到表达服务器答案

【问题标题】：How to POST from angular 2 to express server如何从 Angular 2 POST 到表达服务器
【发布时间】：2018-01-30 03:26:10
【问题描述】：

这里的新手试图掌握将联系表单数据从 Angular 2 发送到 Node/Express 服务器...现在我正在使用 localhost:4200 的内置服务器和 express 服务器托管 Angular 2在本地主机：3000。我尝试了以下代码，但收到以下错误：

Error: ENOENT: no such file or directory, stat 'C:\Users\corey\Desktop\Project\server\api\contact-form-submit'

这是我的contact-form.component.ts 文件：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { HttpClient } from '@angular/common/http';


@Component({
  selector: 'app-contact-form',
  templateUrl: './contact-form.component.html',
  styleUrls: ['./contact-form.component.css']
})
export class ContactFormComponent {

    constructor(private http: HttpClient) {}

    onSubmit(form) {
        this.http.post('http://localhost:3000/server/api/contact-form-submit', JSON.stringify(form.value)).subscribe();
        console.log(form.value);
    }


}

这是我的 server.js 文件：

var express = require('express');
var nodemailer = require('nodemailer');
var mg = require('nodemailer-mailgun-transport');
var bodyParser = require('body-parser');
var app = express();
var path = require('path');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));

//trying to get contact form submission from angular 2 form here
app.get('/', function (req, res) {
    res.sendfile('./api/contact-form-submit');
    console.log('test');
});

//api key and domain for mailgun
var auth = {
  auth: {
    api_key: 'api-key-here',
    domain: 'mailgun@domain here'
  }
}

//trying to send email with nodemailer here
app.post('./api/send', function(req, res) {
    var transporter = nodemailer.createTransport(mg(auth));

    var mailOptions = {
        from: 'postmaster@email.com',
        to: 'email@goeshere.com',
        subject: 'Website submission',
        text: 'Name: ' + req.body.name + 'Email: ' + req.body.email + 'Message: ' + req.body.message,
        html: '<p>Submission: </p><br><ul><li>Name: ' + req.body.name + '</li><li>Email: ' + req.body.email + '</li><li>Message: ' + req.body.message + '</li></ul>' 
    };

    transporter.sendMail(mailOptions, function(error, info) {
        if (error) {
            console.log(error);
            res.redirect('/');
        } else {
            console.log('Message sent.');
            res.redirect('/');
        }
    })

});

app.listen(3000, function() {
    console.log('Express started on port 3000');
});

我获得了在 Angular 2 中使用的成功表单数据，并且我让快递服务器通过常规快递邮件发送电子邮件/获取 html 文件...但我不了解如何将 Angular 与Express 并使用它通过 Nodemailer 发送电子邮件。这里有什么帮助吗？谢谢。 This is my project structure.

【问题讨论】：

尝试将您的 api 路由 URL 从 app.post('./api/send', 更改为 app.post('/api/send', （不带点）
该错误也可能是因为服务器无法从这一行 res.sendfile('./api/contact-form-submit'); 归档您想要的文件。由于它正在尝试从文件系统中读取，并且可能文件不存在，因此它会抛出找不到文件的错误。

标签： node.js angular express

【解决方案1】：

我正在回答类似的问题How to make post request from angular to node server

当您从 Angular 发帖时，您需要在您的服务器上配置 cross-origin。

查看这个 github repo https://github.com/kuncevic/angular-httpclient-examples

【讨论】：