点击前端按钮如何调用Node.js的mail.js实现邮件发送

你不能直接在浏览器运行的script.js里调用Node.js环境的mail.js代码——二者运行环境完全隔离：前者跑在用户本地浏览器，后者跑在你的服务器上，必须通过HTTP接口的方式完成通信，具体实现步骤如下：

1. 改造后端mail.js，对外提供邮件发送接口 #

先安装需要的依赖：

npm install express cors nodemailer dotenv

把原有mail.js的代码改写为web服务形式，不要在文件加载时直接执行发信逻辑，而是把发信逻辑封装成接口供前端调用：

require('dotenv').config()
const express = require('express')
const nodemailer = require('nodemailer')
const cors = require('cors')
const app = express()

// 基础中间件配置
app.use(cors()) // 解决本地开发跨域问题
app.use(express.json()) // 解析POST请求的JSON参数

// 初始化邮件发送实例
const transporter = nodemailer.createTransport({
  host: 'smtp.mail.ru',
  port: 465,
  secure: true,
  auth: {
    user: process.env.EMAIL,
    pass: process.env.PASSWORD,
  },
})

// 发信接口
app.post('/api/send-mail', async (req, res) => {
  try {
    // 接收前端传的邮件参数，没有传就用默认值
    const { to, subject, content } = req.body
    const mailOptions = {
      from: process.env.EMAIL, // 发件人必须和SMTP认证的邮箱一致，否则会被服务商拦截
      to: to || 'your-default-receiver@xxx.com',
      subject: subject || '默认邮件主题',
      html: content || '默认邮件内容'
    }

    await transporter.sendMail(mailOptions)
    res.send({ code: 200, message: '邮件发送成功' })
  } catch (err) {
    console.error('发信失败：', err)
    res.status(500).send({ code: 500, message: '邮件发送失败', error: err.message })
  }
})

// 启动服务，监听3000端口
app.listen(3000, () => {
  console.log('服务已启动，监听端口3000')
})

改完后在终端执行node mail.js启动后端服务。

2. 改造前端script.js，点击按钮时请求发信接口 #

在按钮点击事件里，向后端接口发POST请求触发发信逻辑即可：

const submitButton = document.querySelector('.submit_button');
submitButton.addEventListener('click', async function(e) {
  e.preventDefault() // 如果按钮在form表单内，先阻止默认的表单跳转行为
  try {
    const response = await fetch('http://localhost:3000/api/send-mail', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      // 传你收集到的表单数据，比如收件人、用户输入的邮件内容
      body: JSON.stringify({
        to: 'target@xxx.com',
        subject: '测试邮件',
        content: '<p>这是点击按钮触发发送的测试邮件</p>'
      })
    })
    const result = await response.json()
    if (result.code === 200) {
      alert('邮件已发送')
    } else {
      alert('发送失败：' + result.message)
    }
  } catch (err) {
    console.error('请求异常：', err)
    alert('网络错误，无法发送邮件')
  }
})

• 所有邮箱账号、授权码等敏感信息必须存在服务端的.env文件中，绝对不能写在前端代码里
• 生产环境使用时，一定要给发信接口加频率限制、身份校验，防止被恶意调用盗用你的邮箱发垃圾邮件
• 本地开发时如果遇到跨域问题，确认后端已经引入cors中间件；生产环境如果前后端部署在同域名下，可以把请求地址改成相对路径/api/send-mail，不需要写完整的localhost地址

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