如何调试React前端Axios POST请求到Express后端数据传输失败问题

问题排查与解决方法 #

1. 先解决请求方法偶发变为GET的问题 #

• 检查按钮是否位于<form>标签内：如果是表单内的按钮，没有指定type="button"时，点击会触发表单默认的GET提交行为，覆盖你写的Axios POST请求。解决方法要么给按钮加属性<button type="button" onClick={你的处理函数}>，要么在事件处理函数第一行加e.preventDefault()阻止默认行为。
• 检查Axios请求写法是否规范：如果没有显式指定请求方法，Axios默认发GET请求。正确的POST写法两种二选一即可：

  // 写法1：简写形式
  axios.post('http://localhost:8000/你的接口路径', 要传的参数对象)
  // 写法2：全量配置形式
  axios({
    method: 'POST',
    url: 'http://localhost:8000/你的接口路径',
    data: 要传的参数对象
  })
  

2. 排查请求体无法传到后端的问题 #

• 先确认Express侧是否配置了请求体解析中间件：Express 4.16及以上版本自带json解析能力，你需要在所有路由定义之前加这行代码：

  app.use(express.json())
  

  如果传的是表单格式数据，还要再加app.use(express.urlencoded({extended: true}))，没加的话后端的req.body会一直是空对象。
• 检查跨域配置是否放行请求头：如果前后端跨域，CORS配置要允许Content-Type头，否则带application/json标识的请求会被拦截，请求体不会被后端解析。参考配置：

  const cors = require('cors')
  app.use(cors({
    origin: '你的前端访问地址（比如http://localhost:3000）',
    allowedHeaders: ['Content-Type']
  }))
  

• 直接通过Safari开发工具定位问题：打开Safari的「开发」-「显示Web检查器」，切换到「网络」标签，点击触发请求的按钮后找到对应的接口请求，查看「请求」分类下的请求体有没有携带数据，如果请求体是空的问题在前端，否则问题在后端。

3. 断点放置建议 #

• 前端断点：直接在onClick处理函数里、Axios请求发起的前一行加debugger，运行到断点时查看你要传的参数变量是否有值，格式是否正确；也可以临时加console.log('发送的参数', 你的参数变量)打印确认。
• 后端断点：在对应接口的路由处理函数第一行加console.log('收到的请求体', req.body, '请求头', req.headers)，看终端输出有没有拿到数据，也可以直接在这行打调试断点。

4. 数据无法写入SQL的排查 #

• 确认后端拿到req.body后，拼接SQL语句的字段名、字段类型是否和数据库表结构匹配，可以先把要写入的参数打印出来，手动复制到数据库工具里执行SQL，排查是不是语法错误、约束不满足的问题。
• 给SQL执行逻辑加try/catch包裹，打印错误信息，确认是参数问题、数据库连接问题还是权限问题。

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