javascript - 无法从 Nodemailer 联系表单发送电子邮件

Question

我在联系表单中引入了一些额外的输入字段。因此，联系表格已停止工作。单击 SEND 按钮后，SENDING 消息一直显示。我试图诊断问题的根源。CORS failed 出现在浏览器控制台中。没有错误信息或信息发送成功。以前它工作正常并已发送消息。该表单是在 React.js 和 Nodemailer 中创建的。我应该在哪里寻找问题的根源？

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



const ContactForm = () => {
  const [status, setStatus] = useState("Submit");
  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus("Sending...");
    const { name, email, subject, business, datetime, launch, message } = e.target.elements;
    let details = {
      name: name.value,
      email: email.value,
      subject: subject.value,
      business: business.value,
      datetime: datetime.value, 
      launch: launch.value,
      message: message.value
    };
    let response = await fetch("http://localhost:5000/contact", {
      method: "POST",
      headers: {
        "Content-Type": "application/json;charset=utf-8",
      },
      body: JSON.stringify(details),
    });
    setStatus("Submit");
    let result = await response.json();
    alert(result.status);
  };
  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 [e-mail]</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 onSubmit={handleSubmit} className="contact-form">
          <h2>CONTACT</h2>
          <input type="text" id="name" placeholder="Full name" required/><br/>
          <input type="email" id="email" placeholder="Email" required/><br/>
          <input type="text" id="subject" placeholder="Subject" required/><br/>
          <input type="text" id="business" placeholder="What does your business do?" required/><br/>
          <input type="time-local" id="datetime" placeholder="Your timezone" required/><br/>
          <input type="text" id="launch" placeholder="What is your ideal launch date?" required/><br/>
          <textarea id="message" placeholder="Tell me more about your project" cols="30" rows="10" required></textarea><br/>
          <button type="submit" className="submit" value="Send Message">{status}</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>Design services</h3>
          <h3>Process</h3>
          <h3>Pricing</h3>
        </div>
      </div>
  );
};

index.js

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(5000, () => console.log("Server Running"));

const contactEmail = nodemailer.createTransport({
  host: 'smtp.titan.email ',
  port: 465,
  secure: true,
  auth: {
    user: "[e-mail]",
    pass: "******"
  }
});


contactEmail.verify((error) => {
  if (error) {
    console.log(error);
  } else {
    console.log("Ready to Send");
  }
});

router.post("/contact", (req, res) => {
  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: email,
    to: '[e-mail]',
    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>`,
  };

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

标签： javascriptnode.jsreactjsexpressnodemailer