NextJs + Nodemailer + 获取。如何收到回复

Question

我正在使用 Next.js、nodemailer 和 fetch 构建一个简单的联系表单。当表单工作并且目标电子邮件帐户正在接收来自前端表单的电子邮件时，联系人提交挂在网络中，状态为 pending。大约一分钟后，我收到 Next.js 错误读取 Unhandled Runtime Error TypeError: Failed to fetch。我感觉这与我使用 Fetch 的方式有关。我已经习惯了 Axios，我借此机会改进了 Fetch。但是我引用了 MDN's Fetch 页面。

Form.js

import { useState } from 'react';

const Form = () => {
    const [name, setName] = useState('')
    const [email, setEmail] = useState('')
    const [message, setMessage] = useState('')
    const [submitted, setSubmitted] = useState(false)

    const handleSubmit = (e) => {
        e.preventDefault();
        let data = {
            name,
            email,
            message
        }

        fetch('/api/contact', {
            method: 'POST',
            headers: {
                'Accept': 'application/json, text/plain, */*',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        }).then((response) => {
        /// NOT RECEIVING CONSOLE LOG OR RESPONSE STATUS BELOW
            console.log('response recieved')
            if (response.status === 200) {
                console.log('response succeeded')
                setSubmitted(true)
                setName('')
                setEmail('')
                setBody('')
            } 
        }).then(data => {
            console.log(data)
        }).then((error) => {
            console.error(error)
        })
      }          

    return (
        <div >
        < form >
        < formGroup >
            < label htmlFor='name'>Name</label>
            < input type='text' onChange={(e)=>{setName(e.target.value)}} name='name' /> 
        </formGroup>
        < formGroup >
            < label htmlFor='email'>Email</label>
            < input type='text' onChange={(e)=>{setEmail(e.target.value)}} name='email' />
        </formGroup>
        < formGroup >
            < label htmlFor='message'>Message</label>
            < input type='text' onChange={(e)=>{setMessage(e.target.value)}} name='message' />
        </formGroup>
        < input type='submit' onClick={(e)=>{handleSubmit(e)}}/>
        </form >
        </div>
    )
}

export default Form;

上面的获取引用了下面的联系表，它位于标准 Next.js 项目附带的 api 文件夹中。重构了几次，看看是否有什么不同，包括 async/await.

contact.js

export default function (req, res) {
    require('dotenv').config();
    
    let nodemailer = require('nodemailer')
    
    const transporter = nodemailer.createTransport({
      port: 465,
      host: "smtp.gmail.com",
      auth: {
        user: 'samplenodemailer@email.com',
        pass: process.env.password,
      },
      secure: true,
    })

    const mailData = {
      from: 'samplenodemailer@email.com',
      to: 'targetinbox@email.com',
      subject: `Test Quote Submission From: ${req.body.name}`,
      text: req.body.message + " | Sent from: " + req.body.email,
      html: `<div>${req.body.message}</div><p>Sent from:
      ${req.body.email}</p>`
    }

    transporter.sendMail(mailData, function (err, info) {
      if(err)
        {console.log(err)}
      else
        {console.log(info)}
    })

    res.status(200)
  }

我不确定我哪里出错了。我感觉这与我在 Form.js 中处理 Fetch 的方式有关。任何帮助或建议将不胜感激。

编辑这里有一些相关的日志

航站楼：API resolved without sending a response for /api/contact, this may result in stalled requests.

Answer 1

在您的 API 路由中，仅 res.status(200) 不会发送响应 - 您需要调用 end().

export default function (req, res) {
    //...
    res.status(200).end()
}

NextJs + Nodemailer + 获取。如何收到回复

NextJs + Nodemailer + Fetch. How to receive a response

javascript

email

node.js

nodemailer

next.js