求助：Express服务器无法接收HTML表单的POST请求

核心问题：你将后端Express代码（data.js）作为前端脚本引入到HTML中，同时页面访问方式错误，导致表单提交无法触发后端POST路由。

具体错误点 #

1. 后端代码被前端加载：HTML里的<script src="data.js"></script>会让浏览器尝试执行Node.js环境的代码（比如require('express')），这在浏览器中不被支持，会直接触发报错（可打开浏览器控制台查看）。
2. 页面访问方式错误：直接双击打开HTML文件时，浏览器用file://协议加载页面，表单提交的action="/"会指向本地文件路径，而非运行在localhost:5000的Express服务器。

分步解决方案 #

1. 移除前端的后端脚本引入 #

修改HTML，删除<script src="data.js"></script>这一行——data.js是后端服务代码，完全不需要在前端加载。

修正后的HTML片段：

<body>
    <main>
      <form id="profile-form" method="POST" action="/">
        <!-- 表单原有内容保持不变 -->
        <button type="submit" class="btn btn-success">SUBMIT</button>
      </form>     
    </main>    
</body>

2. 确保文件目录结构正确 #

你的Express配置了静态文件目录为public，文件结构需符合以下规范：

项目根目录/
├── data.js          # 后端服务文件
├── profileModel.js  # Mongoose模型文件
├── .env             # 环境变量文件
└── public/
    └── basic.html   # 前端HTML文件

3. 正确访问页面 #

启动Express服务器后，在浏览器中访问http://localhost:5000，而非直接打开public/basic.html文件。此时表单提交的action="/"会正确指向后端的POST路由。

4. 后端代码优化建议 #

• Express 4.16+已内置urlencoded解析，无需单独安装body-parser，可替换为：

  app.use(express.urlencoded({ extended: true }));
  

• 添加Mongoose连接的错误处理，确认数据库连接状态：

  mongoose.connect(`mongodb+srv://${username}:${password}@cluster0.e6wowbu.mongodb.net/FITIFY_PROFILES?retryWrites=true&w=majority`)
    .then(() => console.log('MongoDB连接成功'))
    .catch(err => console.error('MongoDB连接失败:', err));
  

验证步骤 #

1. 启动后端服务：node data.js，确认控制台输出Server is listening on port: 5000和MongoDB连接成功。
2. 访问http://localhost:5000，填写表单并提交。
3. 查看后端控制台，若输出started，说明POST路由已触发；后续数据库操作正常的话，会输出创建的Profile信息。

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