React.js表单POST提交提示Cannot POST /process-form.php报错求助

AI 小北

2026-8-29

报错原因

cannot POST /process-form.php 触发逻辑：React开发服务运行在3000端口，所有未匹配前端路由的请求都会被该服务接收，它本身不支持解析PHP文件，也没有配置/process-form.php的POST处理逻辑，因此直接返回错误。
端口差异确实是核心诱因：PHP服务运行在80端口，表单当前写的相对路径会默认请求3000端口的同路径地址，请求根本没有发送到PHP服务上。

修复步骤

补全表单输入框属性
当前age输入框缺少name属性，表单提交时不会携带该字段，PHP端$_POST['age']会拿不到值，修改输入框代码：
```
<label htmlFor="age">Age</label>
<input type="text" id="age" name="age" />
```
修正表单提交地址
将form标签的action属性改为PHP服务的绝对地址，直接指向80端口的处理文件：
```
<form action="http://localhost/process-form.php" method="POST">
```
如果不想写硬编码地址，可以在React项目根目录package.json中添加代理配置，将API请求自动转发到80端口：
```
"proxy": "http://localhost:80"
```
配置后action可以直接写/process-form.php，重启React开发服务即可生效，同时能避免跨域问题。
校验PHP文件路径
确认process-form.php存放在80端口Web服务（Apache/Nginx/集成环境如phpStudy）的站点根目录下，直接在浏览器访问http://localhost/process-form.php，如果不返回404 Not Found才说明路径配置正确。
补全PHP端容错逻辑
当前PHP代码直接读取$_POST['age']，如果请求未携带该字段会抛出警告，添加空值判断：
```
<?php
$age = isset($_POST['age']) ? $_POST['age'] : '';
// 后续数据库连接、插入逻辑保持原有代码即可
```