前后端联调求助：提交商品价格数据时出现404错误

API 探路者

2026-8-5

问题描述

我正在开发一个支持用户购买商品的项目，后端的注册、登录、从Mongo获取数据、获取单个商品等所有路由均正常运行。但从单个商品页面将价格数据发送至服务器时，提交表单出现404错误。

控制台报错：

xhr.js:247 POST http://localhost:5000/api/payhere/63c0f0cfef94663a27978c72 404 (Not Found)

终端报错：

POST /api/payhere/63c0f0cfef94663a27978c72 404 0.512 ms - 176

React端代码

const handleSubmit = async (e) => {
   e.preventDefault()

   const x = price
  // console.log(x) ok
  
    try {
      let res = await axios.post(`${process.env.REACT_APP_API}/api/payhere/${id}`, x)
      console.log(res)
    } catch (error) {
      console.log(error.response)
    }   
}

服务端代码

app.post('/api/payhere/:id', async (req, res) => {
    let x = req.body
    console.log(x)
})

排查与解决建议

核对路由注册顺序：确保/api/payhere/:id这个POST路由在所有通配符路由（比如app.get('*', ...)）之前注册，否则会被覆盖导致匹配失败。
验证请求URL正确性：在React代码里打印${process.env.REACT_APP_API}/api/payhere/${id}的最终值，检查是否出现重复前缀（比如环境变量已经包含/api，导致拼接后变成/api/api/payhere/xxx）。
确认路由挂载状态：如果服务端用了express.Router()拆分路由，检查该POST路由是否通过app.use()正确挂载到主应用实例上，没有遗漏配置。
重启服务端：修改服务端路由代码后必须重启服务，否则新路由不会生效，这是最容易忽略的点。
测试简化路径：暂时把请求ID换成简单值（比如123），测试是否能匹配到路由，排除ID格式导致的潜在问题。