Astro中Nodemailer端点故障时的前端提示与重定向问题

方案一：客户端异步提交（推荐，灵活控制UI） #

这种方式通过前端JS发起请求，直接在客户端处理成功/失败状态，避免服务器端响应冲突的问题。

1. 表单HTML结构 #

添加错误提示容器，用于展示故障信息：

<form id="contactForm" action="/api/contact" method="post">
  <input type="text" name="name" required placeholder="你的姓名">
  <input type="email" name="email" required placeholder="你的邮箱">
  <textarea name="message" required placeholder="留言内容"></textarea>
  <button type="submit">提交</button>
  <!-- 错误提示容器，默认隐藏 -->
  <div id="errorAlert" style="display: none; color: #dc2626; margin-top: 12px;"></div>
</form>

2. 客户端提交逻辑 #

添加内联脚本处理表单提交，阻止默认行为并发起异步请求：

<script is:inline>
document.getElementById('contactForm').addEventListener('submit', async (e) => {
  e.preventDefault();
  const form = e.target;
  const errorAlert = document.getElementById('errorAlert');
  
  // 重置错误状态
  errorAlert.style.display = 'none';
  errorAlert.textContent = '';

  try {
    const response = await fetch(form.action, {
      method: form.method,
      body: new FormData(form),
      headers: { 'Accept': 'application/json' }
    });

    if (!response.ok) {
      // 获取端点返回的错误信息，没有则用默认提示
      const errorData = await response.json().catch(() => null);
      errorAlert.textContent = errorData?.message || '提交失败，请稍后重试';
      errorAlert.style.display = 'block';
      // 也可以替换为alert弹窗：alert(errorData?.message || '提交失败，请稍后重试');
      return;
    }

    // 提交成功后的处理
    form.reset();
    alert('提交成功！我们会尽快与你联系');
  } catch (err) {
    // 处理网络故障或端点不可达的情况
    errorAlert.textContent = '服务器连接失败，请检查网络后重试';
    errorAlert.style.display = 'block';
  }
});
</script>

3. 调整Nodemailer端点返回JSON响应 #

修改你的端点文件（如src/pages/api/contact.ts），确保返回JSON格式的成功/失败状态，而非尝试在页面组件里重定向：

import type { APIRoute } from 'astro';
import nodemailer from 'nodemailer';

export const POST: APIRoute = async ({ request }) => {
  try {
    const formData = await request.formData();
    const name = formData.get('name') as string;
    const email = formData.get('email') as string;
    const message = formData.get('message') as string;

    // 初始化Nodemailer transporter
    const transporter = nodemailer.createTransport({
      host: '你的SMTP服务器地址',
      port: 587,
      secure: false,
      auth: {
        user: '你的邮箱账号',
        pass: '你的邮箱授权码'
      }
    });

    // 发送邮件
    await transporter.sendMail({
      from: email,
      to: '客户接收邮箱',
      subject: `新联系表单：${name}`,
      text: `姓名：${name}\n邮箱：${email}\n留言：${message}`
    });

    return new Response(JSON.stringify({ success: true }), {
      status: 200,
      headers: { 'Content-Type': 'application/json' }
    });
  } catch (err) {
    console.error('邮件发送失败:', err);
    return new Response(JSON.stringify({ 
      success: false, 
      message: '邮件发送失败，请稍后重试' 
    }), {
      status: 500,
      headers: { 'Content-Type': 'application/json' }
    });
  }
};

方案二：服务器端提交（纯后端重定向） #

如果不想用前端JS，可让表单直接提交到端点，由端点统一处理重定向，避免ResponseSentError：

1. 表单HTML #

直接将表单action指向端点：

<form action="/api/contact" method="post">
  <input type="text" name="name" required placeholder="你的姓名">
  <input type="email" name="email" required placeholder="你的邮箱">
  <textarea name="message" required placeholder="留言内容"></textarea>
  <button type="submit">提交</button>
</form>

2. 修改端点逻辑 #

在端点中完成邮件发送后，直接返回重定向响应，确保只发送一次响应：

import type { APIRoute } from 'astro';
import nodemailer from 'nodemailer';

export const POST: APIRoute = async ({ request, redirect }) => {
  try {
    const formData = await request.formData();
    const name = formData.get('name') as string;
    const email = formData.get('email') as string;
    const message = formData.get('message') as string;

    const transporter = nodemailer.createTransport({
      // 你的SMTP配置
    });

    await transporter.sendMail({
      // 邮件配置
    });

    // 成功时重定向到成功页面
    return redirect('/success-page');
  } catch (err) {
    console.error('邮件发送失败:', err);
    // 失败时重定向到失败页面
    return redirect('/fail-page');
  }
};

报错原因说明 #

你之前遇到的ResponseSentError，是因为在页面组件中已经向浏览器发送了HTML响应，之后再调用Astro.redirect会导致重复发送响应，违反HTTP协议（一个请求只能返回一个响应）。所以要么用前端异步提交在客户端处理错误，要么让端点单独处理所有提交后的重定向逻辑。

内容的提问来源于stack exchange，提问作者Sebastien Desemberg