Vue项目POST请求返回404错误，已配置后端路由仍异常

1. 核对前后端路径匹配 #

• 先检查server.js里的路由定义：如果后端写的是app.post('/signup', ...)，但前端请求的是/api/signup，路径完全不匹配，直接返回404。
• 要是后端用了路由前缀（比如app.use('/api', router)），那路由得写成router.post('/signup', ...)，这样完整路径才是/api/signup，否则实际路径还是/signup。

2. 验证请求的完整地址 #

• Postman里必须用完整URL请求，比如http://localhost:3000/api/signup（3000换成你的后端端口），只写/api/signup会默认用Postman的本地地址，肯定找不到。
• 前端这边检查axios的baseURL配置：如果没设置baseURL，axios.post('/api/signup')会请求前端所在的域名+端口（比如前端跑8080就请求http://localhost:8080/api/signup），这时候得在vue.config.js里配置代理转发：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 替换成你的后端服务地址
        changeOrigin: true,
        pathRewrite: { '^/api': '' } // 如果后端路由没有/api前缀，就加这行去掉前缀
      }
    }
  }
}

3. 检查后端中间件和路由顺序 #

• 确保路由定义在express.json()或body-parser之后，虽然这主要影响请求体解析，但顺序错了也可能导致路由不生效：

// 正确顺序示例
const express = require('express');
const app = express();
// 先解析请求体
app.use(express.json());
// 再定义路由
app.post('/api/signup', (req, res) => {
  // 处理逻辑
});
app.listen(3000);

• 别把404兜底中间件写在路由前面，比如先写app.use((req, res) => res.sendStatus(404))，后面的路由根本不会被执行。

4. 确认后端服务状态 #

• 重启后端服务，很多时候代码修改后没重启，旧的路由配置还在运行，导致新路由不生效。
• 在后端路由处理函数里加个日志，比如console.log('收到signup请求')，如果请求进来会打印，没打印说明路径根本没匹配到后端。

5. 检查路由挂载是否正确 #

• 如果用了express Router，一定要把router挂载到app上，不然路由等于白定义：

const router = express.Router();
router.post('/signup', (req, res) => { /* 处理逻辑 */ });
// 挂载到/api前缀下
app.use('/api', router);

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