Nodemailer 不适用于反应联系表

Question

当我尝试从 React.js 和 Nodemailer 中的联系表单发送 email 时，出现以下错误。 我有一个问题，因为我无法诊断问题出在哪里。 点击 forms 中的发送按钮后，屏幕上没有出现错误的 window。 没有发送电子邮件的原因是什么？

Error: getaddrinfo ENOTFOUND smtp.titan.email 
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:67:26) {
  errno: -3008,
  code: 'EDNS',
  syscall: 'getaddrinfo',
  hostname: 'smtp.titan.email ',
  command: 'CONN'
}

ContactForm.js

import React from "react";
import Minimal5 from '../img/minimal5.jpg';
import Minimal4 from '../img/minimal4.jpg';
import {FaFacebookSquare, FaInstagramSquare, FaPinterestSquare } from "react-icons/fa";
import axios from "axios";




class ContactForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      email: '',
      subject: '',
      business: '',
      datetime: '',
      launch: '',
      message: ''
    }
  }

  onNameChange(event) {
    this.setState({name: event.target.value})
  }

  onEmailChange(event) {
    this.setState({email: event.target.value})
  }

  onSubjectChange(event) {
    this.setState({subject: event.target.value})
  }

  onBusinessChange(event) {
    this.setState({business: event.target.value})
  }

  onDateTimeChange(event) {
    this.setState({datetime: event.target.value})
  }

  onLaunchChange(event) {
    this.setState({launch: event.target.value})
  }

  onMessageChange(event) {
    this.setState({message: event.target.value})
  }

  submitEmail(e){
    e.preventDefault();
    axios({
      method: "POST", 
      url:"/send", 
      data:  this.state
    }).then((response)=>{
      if (response.data.status === 'success'){
          alert("Message Sent."); 
          this.resetForm()
      }else if(response.data.status === 'fail'){
          alert("Message failed to send.")
      }
    })
  }
  resetForm(){
      this.setState({name: '', email: '',subject:'', business: '', datetime: '', launch: '', message: ''})
  }
  
  render() {
    return (
      <div className="form-container">
        <div className="about-image contact-form">
            <img src={Minimal5} alt="Minimal5" />
              <p className="about-more">I'd love to hear from you! I aim to answer all emails whithin my normal business hours of M-F, 9-4pm.</p>
              <p className="about-more">Use the form below or email me at office@delightart.co</p>
              <ul>
                <li><a href="https://facebook.com/delightartco"><FaFacebookSquare color="#9D7C5E"/></a></li>
                <li><a href="https://facebook.com/delightartco"><FaInstagramSquare color="#9D7C5E"/></a></li>
                <li><a href="https://pinterest.com/delightartco30"><FaPinterestSquare color="#9D7C5E"/></a></li>
                <li><span className="signature">Delightartco</span></li>
              </ul>
        </div>
        <form className="contact-form" onSubmit={this.submitEmail.bind(this)} method="POST">
          <h2>CONTACT</h2>
          <input type="text" id="name" placeholder="Full name" required value={this.state.name} onChange={this.onNameChange.bind(this)}/><br/>
          <input type="email" id="email" placeholder="Email" required value={this.state.email} onChange={this.onEmailChange.bind(this)}/><br/>
          <input type="text" id="subject" placeholder="Subject" required value={this.state.subject} onChange={this.onSubjectChange.bind(this)}/><br/>
          <input type="text" id="business" placeholder="What does your business do?" requiredn value={this.state.business} onChange={this.onBusinessChange.bind(this)} /><br/>
          <input type="time-local" id="datetime" placeholder="Your timezone" required value={this.state.datetime} onChange={this.onDateTimeChange.bind(this)}/><br/>
          <input type="text" id="launch" placeholder="What is your ideal launch date?" required value={this.state.launch} onChange={this.onLaunchChange.bind(this)}/><br/>
          <textarea id="message" placeholder="Tell me more about your project" cols="30" rows="10" required value={this.state.message} onChange={this.onMessageChange.bind(this)}></textarea><br/>
          <button type="submit" className="submit" value="Send Message">Submit</button>
        </form>
        </div>
  );
  }
};

export default ContactForm;



export function Design() {
      return (
        <div className="questions">
          <div className="questions-img">
            <img id="kuki" src={Minimal5} alt="Minimal5" />
            <img id="winnie" src={Minimal4} alt="Portfolio" />
          </div>
          <div className="questions-text">
            <h2 className="blacker-font">Have questions? Check our: </h2>
            <h3 className="service-font">Design services</h3>
            <h3 className="service-font">Process</h3>
            <h3 className="service-font">Pricing</h3>
          </div>
    </div>
  );
}

const express = require("express");
const router = express.Router();
const cors = require("cors");
const nodemailer = require("nodemailer");

const app = express();
app.use(cors());
app.use(express.json());
app.use("/", router);
app.listen(5001, () => console.log("Server Running"));

let transporter = nodemailer.createTransport({
  host: 'smtp.titan.email ',
  port: 587,
  auth: {
    user: "office@delightart.co",
    pass: "qwerty"
  }
});

// verify connection configuration
transporter.verify(function(error, success) {
  if (error) {
    console.log(error);
  } else {
    console.log("Server is ready to take our messages");
  }
});


router.post("/send", (req, res, next) => {
  const name = req.body.name;
  const email = req.body.email;
  const subject = req.body.subject;
  const business = req.body.business;
  const datetime = req.body.datetime;
  const launch = req.body.launch;
  const message = req.body.message; 
  const mail = {
    from: name,
    to: 'office@delightart.co',
    subject: 'Contact Form Submission',
    html: `<p>Name: ${name}</p>
           <p>Email: ${email}</p>
           <p>Subject: ${subject}</p>
           <p>Business: ${business}</p>
           <p>Your timezone: ${datetime}</p>
           <p>Launch date: ${launch}</p>
           <p>Message: ${message}</p>`,
  };

  transporter.sendMail(mail, (err, data) => {
    if (err) {
      res.json({ status: "ERROR" });
    } else {
      res.json({ status: "Message Sent" });
    }
  });
});

Answer 1

在我第一次尝试使用 node-Mailer 时我会遇到同样的错误......关于 tls

  var transporter = nodemailer.createTransport({
  service: "SMTP",
  auth: {
    user: process.env.POST,
    pass: process.env.PASSWORD,
  },
  tls: { rejectUnauthorized: false }, // add this line to your code
}); 

Answer 2

The error Error: getaddrinfo ENOTFOUND smtp.titan.email says that the program can't find the address smtp.titan.email . 我看到字符串末尾有一个多余的空格，你应该删除它。

let transporter = nodemailer.createTransport({
  host: 'smtp.titan.email ', // <---- notice the extra space at the end of the string and remove it.
  port: 587,
  auth: {
    user: "office@delightart.co",
    pass: "qwerty"
  }
});

Answer 3

我有消息“服务器已准备好接收我们的消息”。 那太好了。 还有一个问题，因为按下提交按钮后，表单没有发送，按钮仍然显示正在发送：链接。 youtu.be/xKZahrqgR7I