React前端无法访问PHP后端路由文件app.php的问题求助

看起来你遇到的是典型的跨域请求（CORS）+ 路由配置问题，毕竟React开发服务器跑在localhost:3000，而PHP后端在默认的80端口，浏览器的同源策略会直接拦截这种跨域请求。我来帮你一步步梳理解决：

1. 别用mode:'no-cors'！这是你拿到undefined的核心原因 #

当你开启no-cors模式时，浏览器会严格限制响应内容的读取——哪怕请求成功，你也拿不到后端返回的任何数据，所以Response:undefined是正常现象。正确的做法是在PHP后端配置CORS允许跨域请求：

在back-end/app.php的最顶部（必须在输出任何HTML/JSON内容之前）添加以下代码：

// 允许React开发服务器的跨域请求
header("Access-Control-Allow-Origin: http://localhost:3000");
// 允许的请求方法
header("Access-Control-Allow-Methods: POST, GET, OPTIONS");
// 允许的请求头（对应你fetch里的Content-Type）
header("Access-Control-Allow-Headers: Content-Type");

// 处理浏览器的OPTIONS预检请求
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    exit(0); // 直接返回成功，不需要继续执行后续代码
}

解释：浏览器在发送POST这类非简单请求前，会先发送一个OPTIONS预检请求确认后端允许跨域，必须处理这个请求否则会被拦截。

2. 检查路由配置是否正确 #

从你的项目结构看，.htaccess是放在back-end文件夹里的，但你的fetch请求地址是http://localhost/registration-processing——如果你的Apache根目录是包含back-end和front-end的父文件夹，这个地址是找不到app.php的。

两种调整方案： #

方案A：移动.htaccess到项目根目录

把.htaccess从back-end文件夹移到根目录（和back-end、front-end同级），然后修改内容为：

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ back-end/app.php [QSA,L]

这样访问http://localhost/registration-processing就会正确转发到back-end/app.php。

方案B：修改fetch请求的URL

如果不想动.htaccess，直接把fetch的地址改成http://localhost/back-end/registration-processing，确保请求能命中back-end文件夹下的路由规则。

3. 更省心的开发模式：React代理配置 #

如果你不想折腾CORS头，可以在React项目的package.json里添加代理配置，让React开发服务器自动转发请求到后端：

• 打开front-end/react-environment/package.json，在末尾添加一行：

  "proxy": "http://localhost"
  

• 然后把fetch的URL改成/registration-processing（去掉完整域名）：

  fetch('/registration-processing', {
      // 其余配置不变
  })
  

这样在npm start的开发环境下，React服务器会自动把请求转发到80端口的PHP后端，彻底避免跨域问题。注意：这个配置只在开发环境生效，生产部署时需要配置服务器反向代理（比如Apache/Nginx的转发规则）。

4. 调试小技巧 #

打开浏览器开发者工具（F12），切换到「Network」标签：

• 如果请求状态码是404：说明URL不对，路由没匹配到app.php；
• 如果是403/500：说明后端代码有错误，检查app.php里的逻辑；
• 如果OPTIONS请求失败：说明CORS头配置有问题，回头检查第一步的PHP代码。

备注：内容来源于stack exchange，提问作者ruzic