React+Express商品管理系统创建产品POST请求失败求助

前端（App.jsx/ProductForm.jsx）排查项 #

• 请求基础信息校验
  • 核对请求地址是否与后端路由完全一致，比如后端是/api/products，前端不能写成/product或其他路径
  • 确保请求方法明确设置为POST，示例代码：

    fetch('/api/products', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(yourProductData)
    })
    

• 数据格式与请求头
  • 必须设置Content-Type: application/json请求头，否则后端无法解析JSON格式的请求体
  • 检查表单字段名是否与后端接收的字段完全匹配，没有遗漏必填参数
• 错误信息捕获
  • 在请求中添加错误处理，打印具体错误细节，方便定位：

    .catch(err => {
      console.error('请求失败:', err);
      console.error('错误详情:', err.response?.data || err.message);
    })
    

后端（server.jsx）排查项 #

• 路由与跨域配置
  • 确认POST路由已正确注册，比如Express框架下：

    app.post('/api/products', (req, res) => {
      // 产品创建逻辑
    })
    

  • 若前后端端口不同，必须配置CORS中间件解决跨域问题：

    const cors = require('cors');
    app.use(cors());
    

• 请求体解析
  • 务必添加JSON解析中间件，否则无法获取POST请求的body数据：

    app.use(express.json());
    

• 后端错误处理
  • 在路由处理函数中捕获异常，返回明确的错误状态码和信息：

    try {
      const newProduct = await ProductModel.create(req.body);
      res.status(201).json(newProduct);
    } catch (err) {
      res.status(400).json({ error: err.message });
    }
    

• 服务状态校验
  • 确认后端服务正常启动，端口未被占用，前端请求的端口与后端端口一致

网络层面排查 #

• 打开浏览器开发者工具（F12）的Network标签，查看POST请求的详细信息：
  • 查看状态码：4xx代表客户端请求错误，5xx代表服务器内部错误，2xx才是成功状态
  • 检查请求体是否完整发送，后端是否正确接收
  • 查看响应内容，获取后端返回的具体错误提示

内容的提问来源于stack exchange，提问作者Isalanya Mwase Sam