调用Nodemailer函数时出现‘相对引用需以/、./或../开头’错误

Nodemailer是Node.js专属的后端邮件发送库，无法直接在浏览器（前端）环境运行：

• 你单独运行JS文件时，是用Node.js执行的，Node能识别模块导入并处理SMTP连接；
• 绑定HTML按钮后，代码在浏览器中运行，浏览器不支持Node.js的模块解析规则，且直接在前端调用SMTP会暴露邮箱密码、触发跨域和安全风险。

核心逻辑是把邮件发送代码放到Node.js后端，前端通过API请求触发发送。

步骤1：搭建Node.js后端服务 #

1. 初始化项目并安装依赖：

npm init -y
npm install express nodemailer cors

2. 创建后端文件server.js：

const express = require('express');
const nodemailer = require('nodemailer');
const cors = require('cors');
const app = express();

// 允许跨域请求
app.use(cors());
// 解析JSON请求体
app.use(express.json());

// 配置邮件发送器
const transporter = nodemailer.createTransport({
    host: 'smtp.gmail.com',
    port: 587,
    secure: false, // 587端口用false，465端口用true
    auth: {
        user: '你的邮箱地址',
        pass: '你的邮箱授权码' // Gmail需开启两步验证后生成应用专用密码，不能用原密码
    }
});

// 定义发送邮件的API接口
app.post('/send-email', async (req, res) => {
    try {
        const { from, to, subject, text } = req.body;
        await transporter.sendMail({ from, to, subject, text });
        res.status(200).send('邮件发送成功');
    } catch (error) {
        console.error(error);
        res.status(500).send('邮件发送失败');
    }
});

// 启动后端服务
app.listen(3000, () => {
    console.log('后端服务运行在 http://localhost:3000');
});

步骤2：修改前端代码 #

1. 前端JS文件myFile.js改为请求后端接口：

export async function writeMail() {
    const mailOptions = {
        from: '发送者邮箱',
        to: '接收者邮箱',
        subject: '邮件主题',
        text: '邮件内容'
    };

    try {
        const response = await fetch('http://localhost:3000/send-email', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(mailOptions)
        });

        response.ok ? alert('邮件发送成功') : alert('邮件发送失败');
    } catch (error) {
        console.error(error);
        alert('请求出错，请检查后端服务是否启动');
    }
}

2. 修改HTML，将模块函数暴露到全局或用事件监听（推荐后者）：

<!-- 方式1：暴露函数到全局 -->
<script type="module">
    import { writeMail } from './myFile.js';
    window.writeMail = writeMail;
</script>
<input type="button" value="Submit" onclick="writeMail()">

<!-- 方式2：事件监听（更规范） -->
<script type="module">
    import { writeMail } from './myFile.js';
    document.querySelector('input[type="button"]').addEventListener('click', writeMail);
</script>
<input type="button" value="Submit">

关键注意事项 #

• Gmail用户必须开启两步验证，并生成应用专用密码替换原密码，否则会被Google拦截；
• 先启动后端服务：node server.js，再打开前端页面；
• 所有敏感信息（邮箱账号、密码）必须放在后端，绝对不能在前端代码中硬编码。

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