如何使用ReactJS对接Amazon SES实现邮件发送功能？

注：绝对不要在前端代码中硬编码AWS访问密钥，会被恶意爬取导致账号产生额外费用甚至被盗用，必须通过后端层转发请求调用SES接口

前置准备 #

• 完成AWS SES基础配置：验证你要用来收信/发信的邮箱或域名，沙箱环境下先把你要接收通知的邮箱加入验证列表，生产环境提前申请脱离沙箱
• 准备后端服务，以下示例用轻量的Node.js Express实现，也可替换为AWS Lambda等无服务后端

步骤1：前端React表单实现 #

import { useState } from 'react'

const ContactForm = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  })
  const [submitStatus, setSubmitStatus] = useState('')

  const handleSubmit = async (e) => {
    e.preventDefault()
    setSubmitStatus('提交中...')
    try {
      const res = await fetch('/api/send-email', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(formData)
      })
      if (res.ok) {
        setSubmitStatus('提交成功，我们会尽快回复你')
        setFormData({ name: '', email: '', message: '' })
      } else {
        setSubmitStatus('提交失败，请稍后重试')
      }
    } catch (err) {
      setSubmitStatus('提交失败，请检查网络连接')
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={formData.name}
        onChange={(e) => setFormData({...formData, name: e.target.value})}
        placeholder="你的姓名"
        required
      />
      <input
        type="email"
        value={formData.email}
        onChange={(e) => setFormData({...formData, email: e.target.value})}
        placeholder="你的联系邮箱"
        required
      />
      <textarea
        value={formData.message}
        onChange={(e) => setFormData({...formData, message: e.target.value})}
        placeholder="留言内容"
        required
        rows={5}
      />
      <button type="submit">提交留言</button>
      {submitStatus && <p>{submitStatus}</p>}
    </form>
  )
}

export default ContactForm

步骤2：后端接口实现（Node.js Express示例） #

1. 先安装依赖：npm install aws-sdk express cors dotenv
2. 在项目根目录创建.env文件，填写配置信息，不要将该文件提交到代码仓库

AWS_ACCESS_KEY_ID=你的AWS访问密钥ID
AWS_SECRET_ACCESS_KEY=你的AWS访问密钥
AWS_REGION=SES服务所在区域，例如us-east-1
SES_RECEIVER_EMAIL=接收表单邮件的目标邮箱
SES_SENDER_EMAIL=已在SES完成验证的发件邮箱

3. 后端服务代码：

const express = require('express')
const AWS = require('aws-sdk')
const cors = require('cors')
require('dotenv').config()

const app = express()
app.use(cors())
app.use(express.json())

// 初始化AWS SES配置
AWS.config.update({
  accessKeyId: process.env.AWS_ACCESS_KEY_ID,
  secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
  region: process.env.AWS_REGION
})
const ses = new AWS.SES({ apiVersion: '2010-12-01' })

// 发邮件接口
app.post('/api/send-email', async (req, res) => {
  const { name, email, message } = req.body
  const sendParams = {
    Destination: {
      ToAddresses: [process.env.SES_RECEIVER_EMAIL]
    },
    Message: {
      Body: {
        Text: {
          Charset: 'UTF-8',
          Data: `新的网站联系表单留言：
姓名：${name}
联系邮箱：${email}
留言内容：${message}`
        }
      },
      Subject: {
        Charset: 'UTF-8',
        Data: `联系表单新留言 - 来自${name}`
      }
    },
    Source: process.env.SES_SENDER_EMAIL,
    ReplyToAddresses: [email] // 配置后直接回复邮件即可发送给表单提交者
  }

  try {
    await ses.sendEmail(sendParams).promise()
    res.status(200).json({ success: true })
  } catch (err) {
    console.error('邮件发送失败：', err)
    res.status(500).json({ success: false })
  }
})

const PORT = process.env.PORT || 3001
app.listen(PORT, () => console.log(`后端服务运行在端口${PORT}`))

上线注意事项 #

• 本地测试时先启动后端服务，再启动React前端，提交表单确认可正常收信
• 如果用Vercel、Netlify等平台部署前端，可直接使用平台的无服务函数替代独立Express后端，无需单独部署后端服务
• 提前给接口加频率限制，避免被恶意刷接口产生额外的AWS费用
• 生产环境使用前确认已申请AWS SES脱离沙箱，否则只能给已验证的邮箱发信

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