QQ邮箱验证码简例，前后端node.js与axios的ajax.post方式信息交互，基于node.js与axios.js，附前后端源码

// 前端代码（React）
import React, { useState } from 'react';
import axios from 'axios';
 
function EmailCaptcha() {
  const [captcha, setCaptcha] = useState('');
 
  const handleSubmit = async (event) => {
    event.preventDefault();
    try {
      const response = await axios.post('/api/email/captcha', {
        email: 'your-email@example.com', // 替换为用户输入的邮箱地址
      });
      setCaptcha(response.data.captcha);
      console.log('验证码已发送至邮箱');
    } catch (error) {
      console.error('发送验证码失败:', error);
    }
  };
 
  return (
    <div>
      <form onSubmit={handleSubmit}>
        <label>
          邮箱:
          <input type="email" name="email" defaultValue="your-email@example.com" />
        </label>
        <button type="submit">获取验证码</button>
      </form>
      <p>收到的验证码：{captcha}</p>
    </div>
  );
}
 
export default EmailCaptcha;

// 后端代码（Node.js）
const express = require('express');
const router = express.Router();
 
// 假设这是发送邮件的函数，需要实现邮件发送逻辑
function sendEmail(to, captcha) {
  // 实现邮件发送逻辑
}
 
router.post('/api/email/captcha', (req, res) => {
  const { email } = req.body;
  const captcha = Math.floor(1000 + Math.random() * 9000).toString(); // 生成一个四位数的随机数字验证码
 
  // 模拟发送邮件的逻辑
  sendEmail(email, captcha);
 
  // 将验证码存储在会话或数据库中，以便验证
  // req.session.captcha = captcha;
 
  res.json({ captcha });
});
 
module.exports = router;

在这个例子中，前端使用React构建，通过axios库发送POST请求到后端的API。后端Node.js使用Express框架处理请求，生成一个随机的验证码，并调用sendEmail函数模拟发送邮件。实际应用中，需要替换sendEmail函数，以实现真正的邮件发送，并且要实现验证码的存储，以便用户提交后验证。