表单提交后跳转至email.php问题排查求助

安全阿岳

2026-8-18

问题排查与解决方案

本地XAMPP环境下，基于PHPMailer的表单邮件发送功能正常，提交后能收到邮件并跳转至thanks.html；但部署到Netlify/Vercel后，表单提交直接跳转至email.php文件，流程完全失效。

核心原因

Netlify和Vercel是静态站点托管服务，默认不提供PHP运行环境。本地XAMPP包含Apache服务器与PHP解析器，能执行PHP代码；而这两个平台仅能处理静态资源（HTML/CSS/JS），访问email.php时只会返回文件内容，无法执行邮件发送与跳转逻辑。

解决方案

需要将PHP后端替换为平台支持的无服务器函数（Serverless Functions），以下以Netlify为例给出实现步骤：

1. 迁移后端至Netlify Functions（Node.js版本）

创建Netlify Functions目录（默认netlify/functions），新建send-email.js文件，使用Nodemailer替代PHPMailer实现邮件发送：

const nodemailer = require('nodemailer');

exports.handler = async (event) => {
  // 仅处理POST请求
  if (event.httpMethod !== 'POST') {
    return { statusCode: 405, body: 'Method Not Allowed' };
  }

  // 解析表单数据
  const formData = new URLSearchParams(event.body);
  const name = formData.get('name');
  const surname = formData.get('surname');
  const email = formData.get('email');

  try {
    // 配置SMTP transporter（使用环境变量存储敏感信息）
    const transporter = nodemailer.createTransport({
      host: 'smtp.mailtrap.io',
      port: 2525,
      secure: false,
      auth: {
        user: process.env.MAILTRAP_USERNAME,
        pass: process.env.MAILTRAP_PASSWORD
      }
    });

    // 发送邮件
    await transporter.sendMail({
      from: 'mnosov622@gmail.com',
      to: 'mnosov622@gmail.com',
      subject: 'Zayavka s sayta',
      text: `${name} ${surname}`
    });

    // 返回跳转指令
    return {
      statusCode: 302,
      headers: {
        Location: '/thanks.html'
      }
    };
  } catch (error) {
    return { statusCode: 500, body: '邮件发送失败' };
  }
};

2. 修改前端表单的提交地址

更新index.html中的表单action属性，指向Netlify Functions的端点：

<form action="/.netlify/functions/send-email" method="POST">
  <input type="text" name="name" placeholder="Your name">
  <input type="text" name="surname" placeholder="Your surname">
  <input type="email" name="email" placeholder="Email">
  <button type="submit">Отправить</button>
</form>

3. 配置环境变量

在Netlify后台的「Site settings > Environment variables」中添加以下变量：

MAILTRAP_USERNAME: 你的Mailtrap用户名（4b4f48f1dfda19）
MAILTRAP_PASSWORD: 你的Mailtrap密码（77ba1bf500d113）

4. 额外优化建议

移除原PHP代码中的echo "Email Sent...!"：在header('Location')之前输出内容会触发PHP的「headers already sent」错误，本地可能因输出缓冲未暴露，但线上环境会直接导致跳转失效。
不要硬编码敏感信息：始终使用环境变量存储SMTP账号、密码等敏感数据，避免代码泄露风险。

Vercel平台适配

如果部署到Vercel，逻辑类似：

创建api目录，新建send-email.js（Vercel Functions默认目录为api）
代码逻辑与Netlify版本基本一致，仅函数导出方式改为export default
在Vercel后台配置相同的环境变量

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