React/VITE求职申请页提交404错误 求前后端对接解决方案

1. 修复端口冲突问题 #

Vite默认启动端口为5173，若后端也监听该端口会导致请求冲突，前端无法正常访问后端接口。立即修改后端监听端口为其他值（如3000）：

// 后端server.js
const express = require('express');
const app = express();

// ...其他配置代码

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

2. 配置Vite前端代理 #

前后端分离存在跨域问题，通过Vite代理将前端请求转发到后端，在vite.config.js中添加以下配置：

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/submit-gmail-addresses': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }
});

3. 校验后端路由与中间件 #

确保后端正确注册POST类型的/submit-gmail-addresses路由，且添加JSON解析中间件（否则无法接收前端传递的JSON数据）：

// 后端server.js
app.use(express.json()); // 必须添加，用于解析JSON请求体

app.post('/submit-gmail-addresses', async (req, res) => {
  try {
    const { email, name, content } = req.body;
    // ...后续邮件发送逻辑
    res.status(200).json({ success: true, msg: '申请已发送' });
  } catch (err) {
    res.status(500).json({ success: false, msg: '发送失败', error: err.message });
  }
});

4. 修正前端请求代码 #

确保前端发送POST请求，路径正确且参数格式为JSON：

// submitApplication.jsx
const handleSubmit = async (e) => {
  e.preventDefault();
  try {
    const response = await fetch('/submit-gmail-addresses', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        email: 'test@example.com',
        name: '测试用户',
        content: '求职申请内容'
      })
    });
    const data = await response.json();
    alert(data.success ? '提交成功' : `提交失败: ${data.msg}`);
  } catch (err) {
    console.error('请求错误:', err);
    alert('网络请求失败，请检查后端服务');
  }
};

5. 修复Nodemailer Gmail配置 #

Gmail默认禁用普通密码登录，需使用应用专用密码（需开启两步验证），或临时允许低安全性应用（不推荐生产环境）。正确配置示例：

// 后端邮件发送逻辑
const nodemailer = require('nodemailer');

const transporter = nodemailer.createTransport({
  service: 'gmail',
  auth: {
    user: 'your-gmail@gmail.com',
    pass: 'your-app-specific-password' // 注意：不是Gmail登录密码，是应用专用密码
  }
});

const mailOptions = {
  from: req.body.email,
  to: 'your-recipient-email@example.com', // 接收申请的目标邮箱
  subject: `新求职申请 - ${req.body.name}`,
  text: `申请人: ${req.body.name}\n邮箱: ${req.body.email}\n申请内容: ${req.body.content}`
};

await transporter.sendMail(mailOptions);

验证流程 #

1. 先启动后端服务（确认运行在3000端口），再启动前端服务（5173端口）
2. 打开浏览器控制台，检查请求URL是否正确转发到http://localhost:3000/submit-gmail-addresses
3. 查看后端控制台，确认是否收到请求及有无报错信息
4. 测试提交，验证邮件是否成功发送至目标邮箱

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