我的react-form表单如何实现提交内容直接发送到指定邮箱？

前端代码本身无法直接发送邮件，直接在React项目里硬编码邮箱凭证会完全泄露，容易被滥用，必须搭配后端逻辑处理，以下是两种可落地的实现方式：

方案1：搭配自有后端实现（适合已有后端服务的项目） #

• 第一步：在你已经写完的react-bootstrap表单的提交事件中，把收集到的表单数据序列化为JSON格式，通过fetch或axios请求你自己的后端接口
• 第二步：后端接收表单数据后调用邮件服务发信，不同技术栈对应常用工具：
  • Node.js后端可以用Nodemailer库
  • Java后端可以用spring-boot-starter-mail依赖
  • 也可以接入第三方邮件推送服务的服务端SDK，稳定性更高
    发件邮箱推荐使用企业邮箱或者专业邮件服务商的SMTP服务，避免用个人邮箱触发风控拦截
• 第三步：后端发信完成后给前端返回状态码，前端对应给用户提交成功/失败的提示即可

React端提交逻辑参考代码：

import { Form, Button } from 'react-bootstrap';
import { useState } from 'react';
import axios from 'axios';

const CustomForm = () => {
  const [formData, setFormData] = useState({
    userName: '',
    contactEmail: '',
    content: ''
    // 其余字段和你现有表单字段对齐即可
  });

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      // 替换为你自己的后端发信接口地址
      const res = await axios.post('/api/submit-form-send-mail', formData);
      if(res.data.success) {
        alert('提交成功，我们会尽快和您联系');
        // 提交成功后重置表单的逻辑可以自己加
      }
    } catch (err) {
      alert('提交失败，请稍后重试');
    }
  }

  return (
    <Form onSubmit={handleSubmit}>
      {/* 这里放你已经写完的表单组件内容 */}
      <Button variant="primary" type="submit">
        提交表单
      </Button>
    </Form>
  )
}
export default CustomForm;

方案2：无服务函数实现（适合纯静态站点无后端的项目） #

如果你的项目是纯静态部署没有后端服务，可以用部署平台自带的无服务函数处理发信逻辑：

• 你使用的静态部署平台如果支持无服务函数（比如Vercel、Netlify等平台的内置函数能力），直接在项目里新增对应的函数文件编写发信逻辑，前端直接请求该函数的路径即可，不需要单独部署后端服务
• 所有邮箱密钥、SMTP凭证都要存在部署平台的环境变量里调用，绝对不要写在代码里提交到代码仓库

注意事项 #

• 绝对不要在前端代码里直接调用SMTP服务发信，所有前端代码里的内容用户都可以直接查看，密钥泄露后会被人恶意用来发垃圾邮件
• 提交接口最好加验证码或者请求频率限制，避免被恶意刷接口
• 发件邮箱最好提前配置SPF、DKIM记录，能大幅提高邮件送达率，避免被收件方扔进垃圾邮箱

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