React项目集成PHPMailer出现404错误求助

部署需求要求在React项目中用PHPMailer而非Express实现联系表单功能，但测试发送邮件时控制台返回错误：POST http://localhost:3000/server.php 404 (Not Found)。已检查文件路径、Apache版本并参考多篇教程，问题仍未解决，以下是相关代码及目录结构：

Form组件代码 #

import React, { useState } from 'react';

function ContactForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    subject: '',
    message: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prevState => ({
      ...prevState,
      [name]: value
    }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
  
    try {
      const response = await fetch('./server.php', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
      });
  
      if (response.ok) {
        alert('Email sent successfully!');
      } else {
        alert('Error sending email!');
      }
    } catch (error) {
      console.error('Error sending email:', error);
      alert('Error sending email!');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
          required
        />
      </label>
      <label>
        Email:
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
          required
        />
      </label>
      <label>
        Subject:
        <input
          type="text"
          name="subject"
          value={formData.subject}
          onChange={handleChange}
          required
        />
      </label>
      <label>
        Message:
        <textarea
          name="message"
          value={formData.message}
          onChange={handleChange}
          required
        />
      </label>
      <button type="submit">Send</button>
    </form>
  );
}

export default ContactForm;

server.php代码 #

<?php
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

require './PHPMailer/src/Exception.php';
require './PHPMailer/src/PHPMailer.php';
require './PHPMailer/src/SMTP.php';

if(isset($_POST['send'])){
    $name = htmlentities($_POST['name']);
    $email = htmlentities($_POST['email']);
    $subject = htmlentities($_POST['subject']);
    $message = htmlentities($_POST['message']);

    $mail = new PHPMailer(true);
    $mail->isSMTP();
    $mail->Host = 'smtp.gmail.com';
    $mail->SMTPAuth = true;
    $mail->Username = 'MYEMAILADRESS';
    $mail->Password = 'PASSWORD';
    $mail->Port = 465;
    $mail->SMTPSecure = 'ssl';
    $mail->isHTML(true);
    $mail->setFrom($email, $name);
    $mail->addAddress('MYEMAILADRESS');
    $mail->Subject = ("$email ($subject)");
    $mail->Body = $message;
    $mail->send();

    header("Location: ./server.php");}
?>

当前目录结构 #

• Form组件：src/assets/Components/Form.js
• server.php：public文件夹内
• PHPMailer目录：src目录下

问题根源及解决步骤 #

1. React开发服务器不处理PHP请求
   React的npm start启动的开发服务器仅处理静态资源和React路由，无法解析PHP文件。直接请求localhost:3000/server.php必然返回404，必须让PHP请求由Apache/Nginx这类支持PHP的服务器处理。

2. 调整运行/部署方式

   • 生产环境部署：
     执行npm run build生成生产代码，将build文件夹内所有文件、server.php、PHPMailer目录一同放到Apache网站根目录（如htdocs）。
     注意：将PHPMailer目录移动到与server.php同级位置，修改server.php中的require路径为./PHPMailer/src/...。
   • 开发环境代理：
     在React项目的package.json中添加代理配置（假设Apache运行在localhost:80）：

     "proxy": "http://localhost:80"
     

     修改fetch路径为/server.php，确保Apache网站根目录指向React项目的public文件夹，同时调整PHPMailer到public目录下以保证路径正确。

3. 修复数据接收逻辑不匹配问题
   React代码以JSON格式发送数据，但PHP的$_POST仅能接收表单编码数据，导致即使路径问题解决，PHP也无法获取参数。二选一修改：

   • 修改React发送表单数据：

     const handleSubmit = async (e) => {
       e.preventDefault();
       const form = new FormData();
       form.append('name', formData.name);
       form.append('email', formData.email);
       form.append('subject', formData.subject);
       form.append('message', formData.message);
       form.append('send', true);
     
       try {
         const response = await fetch('/server.php', {
           method: 'POST',
           body: form,
         });
         // 原有逻辑不变
       } catch (error) {
         console.error('Error sending email:', error);
         alert('Error sending email!');
       }
     };
     

   • 修改PHP解析JSON数据：

     // 替换原有if判断部分
     $data = json_decode(file_get_contents('php://input'), true);
     if($data && isset($data['name'], $data['email'], $data['subject'], $data['message'])){
         $name = htmlentities($data['name']);
         $email = htmlentities($data['email']);
         $subject = htmlentities($data['subject']);
         $message = htmlentities($data['message']);
         // 原有邮件发送逻辑不变
         echo json_encode(['status' => 'success']);
         exit;
     }
     

     同时React中处理JSON响应：

     if (response.ok) {
       const res = await response.json();
       res.status === 'success' ? alert('Email sent successfully!') : alert('Error sending email!');
     }
     

4. 最终路径检查
   确保server.php能通过相对路径找到PHPMailer文件，建议将PHPMailer放在server.php同级目录下，避免因目录结构变化导致路径失效。

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