javascript - Nodemailer Node Express POST 问题 Github 页面 Gmail

标签 javascript html forms express nodemailer

这里是存储库的链接:https://github.com/mcs415/nodemailer-heroku 该存储库基本上是 Brad Travery 教程的复制品:https://www.youtube.com/watch?v=nF9g1825mwk 节点服务器在本地主机上工作，但是当我提交时，我收到一个 POST 错误，之后我没有得到任何信息。

我开始在网络上搜索 Nodemailer POST 错误，然后我得出的结论是它可能是特快的。 我正在使用 Gmail。最初建议使用Zoho mail。我使用应用程序不太安全的选项，存储库上的代码没有填写密码。我想我会先处理 POST 错误。

我设置了 Heroku，然后尝试通过 CLI 创建应用程序，看起来不错，然后出现错误:没有启动脚本，我搜索了该内容，发现在 JSON 文件中的测试后包含一行，然后我的服务器根本没有运行。所以一次只做一件事。首先是 POST 错误，然后是 Heroku，然后是 GMAIL，可能是 0auth 选项或其他电子邮件帐户。

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Contact Morgan</title>
      <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" />
      <link rel="stylesheet" href="public/css/style.css">
    </head>
    <body>
      <div class="container">
        <h1 class="brand"><span>Acme</span> Web Design</h1>
        <div class="wrapper animated bounceInLeft">
          <div class="company-info">
            <ul>
              <li><i class="fa fa-road"></i></li>
              <li><i class="fa fa-phone"></i></li>
              <li><i class="fa fa-envelope"></i> msippel415@gmail.com</li>
            </ul>
          </div>
          <div class="contact">
            <h3>Email Us</h3>
            {{msg}}
            <form method="POST" action"/send">
              <p>
                <label>Name</label>
                <input type="text" name="name">
              </p>
              <p>
                <label>Company</label>
                <input type="text" name="company">
              </p>
              <p>
                <label>Email Address</label>
                <input type="email" name="email">
              </p>
              <p>
                <label>Phone Number</label>
                <input type="text" name="phone">
              </p>
              <p class="full">
                <label>Message</label>
                <textarea name="message" rows="5"></textarea>
              </p>
              <p class="full">
                <button type="submit">Submit</button>
              </p>
            </form>
            <p>Thank you Brad at Traversy media for the tutorial!</p>
          </div>
        </div>
      </div>
    </body>
    </html>

app.js:

    const express = require('express');
    const bodyParser = require('body-parser');
    const exphbs = require('express-handlebars');
    const path = require('path');
    const nodemailer = require('nodemailer');

    const app = express();

    // View engine setup
    app.engine('handlebars', exphbs());
    app.set('view engine', 'handlebars');

    // Static folder
    app.use('/public', express.static(path.join(__dirname, 'public')));

    // Body Parser Middleware
    app.use(bodyParser.urlencoded({ extended: false }));
    app.use(bodyParser.json());

    app.get('/', (req, res) => {
      res.render('contact', {layout: false});
    });

    app.post('/send', (req, res) => {
      const output = `
        <p>You have a new contact request</p>
        <h3>Contact Details</h3>
        <ul>
          <li>Name: ${req.body.name}</li>
          <li>Company: ${req.body.company}</li>
          <li>Email: ${req.body.email}</li>
          <li>Phone: ${req.body.phone}</li>
        </ul>
        <h3>Message</h3>
        <p>${req.body.message}</p>
      `;

      // create reusable transporter object using the default SMTP transport
      let transporter = nodemailer.createTransport({
        host: 'smtp.gmail.com',
        port: 587,
        secure: false, // true for 465, false for other ports
        auth: {
            user: 'msippel415@gmail.com', // generated ethereal user
            pass: '********'  // generated ethereal password
        },
        tls:{
          rejectUnauthorized:false
        }
      });

      // setup email data with unicode symbols
      let mailOptions = {
          from: '"Nodemailer Contact" <msippel415@gmail.com>', // sender address
          to: 'msippel415@gmail.com', // list of receivers
          subject: 'Node Contact Request', // Subject line
          text: 'Hello world?', // plain text body
          html: output // html body
      };

      // send mail with defined transport object
      transporter.sendMail(mailOptions, (error, info) => {
          if (error) {
              return console.log(error);
          }
          console.log('Message sent: %s', info.messageId);
          console.log('Preview URL: %s', nodemailer.getTestMessageUrl(info));

          res.render('contact', {msg:'Email has been sent'});
      });
      });

    app.listen(3000, () => console.log('Server started...'));
    json
    {
      "name": "nodecontactform",
      "version": "1.0.0",
      "description": "sample app using nodemailer",
      "main": "app.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "mcs",
      "license": "MIT",
      "dependencies": {
        "body-parser": "^1.19.0",
        "express": "^4.17.1",
        "express-handlebars": "^3.1.0",
        "i": "^0.3.6",
        "nodemailer": "^6.4.2",
        "npm": "^6.13.4"
      }
    }

最佳答案

您的第一个错误 Cannot POST /可以通过添加 = 来修复登录您的<form>标签 action属性:

<form method="POST" action="/send">

在您的版本中，您实际上是在提出此请求 POST /当你想要POST /send .

其他错误最好通过复制 Nodemailer 提供的代码来处理。我引入了您的项目并编辑了 app.js 以符合 Nodemailer 的示例，并且运行良好。您需要将调用调整为res.render在 POST /send路由添加 layout:false选项:

res.render('contact', { layout: false, msg:'Email has been sent'});

您需要生成一个以太用户并使用这些凭据:

  // Only needed if you don't have a real mail account for testing
  let testAccount = await nodemailer.createTestAccount();

  // create reusable transporter object using the default SMTP transport
  let transporter = nodemailer.createTransport({
    host: "smtp.ethereal.email",
    port: 587,
    secure: false, // true for 465, false for other ports
    auth: {
      user: testAccount.user, // generated ethereal user
      pass: testAccount.pass // generated ethereal password
    }
  });

这是我用来让它工作的 app.js 的完整代码:

app.js

const express = require('express');
const bodyParser = require('body-parser');
const exphbs = require('express-handlebars');
const path = require('path');
const nodemailer = require('nodemailer');

const app = express();

// View engine setup
app.engine('handlebars', exphbs());
app.set('view engine', 'handlebars');

// Static folder
app.use('/public', express.static(path.join(__dirname, 'public')));

// Body Parser Middleware
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.get('/', (req, res) => {
  res.render('contact', {layout: false});
});

app.post('/send', (req, res) => {

  const mailBody = `
    <p>You have a new contact request</p>
    <h3>Contact Details</h3>
    <ul>
      <li>Name: ${req.body.name}</li>
      <li>Company: ${req.body.company}</li>
      <li>Email: ${req.body.email}</li>
      <li>Phone: ${req.body.phone}</li>
    </ul>
    <h3>Message</h3>
    <p>${req.body.message}</p>
  `;

  sendMail(mailBody).catch(console.error);

  res.render('contact', { layout: false, msg:'Email has been sent'});

});

// async..await is not allowed in global scope, must use a wrapper
async function sendMail(html) {
  // Generate test SMTP service account from ethereal.email
  // Only needed if you don't have a real mail account for testing
  let testAccount = await nodemailer.createTestAccount();

  // create reusable transporter object using the default SMTP transport
  let transporter = nodemailer.createTransport({
    host: "smtp.ethereal.email",
    port: 587,
    secure: false, // true for 465, false for other ports
    auth: {
      user: testAccount.user, // generated ethereal user
      pass: testAccount.pass // generated ethereal password
    }
  });

  // send mail with defined transport object
  let info = await transporter.sendMail({
    from: '"Fred Foo 👻" <foo@example.com>', // sender address
    to: "bar@example.com, baz@example.com", // list of receivers
    subject: "Hello ✔", // Subject line
    text: "Hello world?", // plain text body
    html // html body
  });

  console.log("Message sent: %s", info.messageId);
  // Message sent: <b658f8ca-6296-ccf4-8306-87d57a0b4321@example.com>

  // Preview only available when sending through an Ethereal account
  console.log("Preview URL: %s", nodemailer.getTestMessageUrl(info));
  // Preview URL: https://ethereal.email/message/WaQKMgKddxQDoou...
}

app.listen(3000, () => console.log('Server started...'));

这是一个 gif 来展示它的外观:

Ethereal request

您可以在这里找到按预期工作的项目分支:nodemailer-repo

关于javascript - Nodemailer Node Express POST 问题 Github 页面 Gmail，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59385962/

上一篇：浏览器上的 JavaScript 模块

下一篇：javascript - 我们可以将 Angular FormArray 与 angular2-multiselect 下拉菜单一起使用吗？

相关文章：

java - Spring MVC - 动态 Web 表单 - 表单生成器 - 设计问题

javascript - 在 Javascript 中跟踪对多个 Ckeditor 5 实例的更改

javascript - x 轴无法工作，因为我没有正确使用 moment.js

javascript - 递归过滤对象数组

c# - 在带有参数的winforms webbrowser控件中从JS调用C#方法时出错

html - 将 div 放在具有相同高度的 100% 宽度表格的左侧

javascript - 在 Internet Explorer 6 中获取 "Label"标签(适用于单选按钮)

javascript - 更改提交的表单中的值和 JQuery 序列化函数

javascript - 使用javascript删除对象

javascript - riotjs触发表单onsubmit

©2024 IT工具网  联系我们