使用Axios发送POST请求时后端接收Body为null的问题排查

1. 核对请求编码格式与后端解析逻辑 #

• 确认Axios发送的Content-Type请求头和后端解析中间件完全匹配：
  • 若后端用express.json()解析JSON格式，需确保Axios发送的是JSON数据，且Content-Type被正确设置为application/json——即便客户端日志显示头正确，也要检查封装代码是否存在某些分支场景下覆盖了该头。
  • 若发送的是表单数据，后端需配置express.urlencoded({ extended: true })，此时Axios的Content-Type应为application/x-www-form-urlencoded，或直接使用FormData对象（浏览器会自动设置对应头）。
• 检查封装代码是否对POST数据做了错误处理：比如将JSON对象转成字符串后未设置对应头，或误将FormData序列化为JSON。

2. 确认Axios参数传递位置 #

• 确保POST请求的参数放在data字段而非params字段：Axios中params用于拼接URL查询参数（对应GET的query），POST请求体必须存入data。若封装代码逻辑有误，把POST参数误放入params，后端自然拿不到req.body。
• 在Axios请求拦截器中打印最终的config对象，确认data字段确实包含待发送的参数，且格式符合预期。

3. 排查项目全局拦截器或第三方工具干扰 #

• 新React项目可能引入了全局Axios拦截器、axios-mock-adapter这类模拟工具，检查这些代码是否修改了POST请求的data，或在拦截转发时丢失了请求体。
• 确认CORS配置是否允许POST请求的Content-Type：虽然GET请求正常，但部分CORS预处理规则可能限制特定类型的POST请求体传递（不过这种情况服务器通常会有异常日志，可作为次要排查点）。

4. 检查Axios版本差异 #

• 对比新项目与旧项目的Axios版本：Axios 0.x与1.x在默认Content-Type、data序列化逻辑上存在细微差异，若封装代码基于旧版本编写，可能与新版本的默认行为冲突。

5. 发送最简POST请求验证 #

• 跳过封装代码，在新项目中编写最简Axios POST请求测试：

  import axios from 'axios';
  axios.post('/target-api', { testKey: 'testValue' })
    .then(res => console.log(res))
    .catch(err => console.error(err));
  

  若该请求能让后端拿到req.body，则问题出在封装代码；若仍拿不到，需排查项目环境（如webpack配置、代理设置等）。

6. 检查代理配置（若有） #

• 若新项目使用setupProxy.js或http-proxy-middleware等代理工具，检查代理配置是否正确传递了POST请求体：部分代理规则可能因配置不当清空或丢失请求体数据。

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