如何解决Axios发送带请求头与JSON请求体的GET请求返回空响应的问题

错误原因 #

你的代码存在3个核心问题导致参数未正常发送：

• Axios的axios.get() 别名方法默认不支持传递请求体，你配置的body字段Axios不会识别，Axios中请求体的配置字段为data
• 你在config中重复定义了method和url参数，属于无效冗余配置
• HTTP标准规范中GET请求默认不携带请求体，大部分后端框架默认也不会解析GET请求的请求体参数，如果你坚持要使用这种不符合规范的传参方式，需要用Axios通用请求写法

解决方案 #

方案1：推荐方案（符合HTTP规范） #

将参数放到查询字符串中传递，只需修改config配置，新增params字段即可：

var searchRecord = {
  owner: 'wxTWH8zqSwaIXPAVsjZoRCkvjx73',
  date: '2021-09-02',
};

var config = {
  headers: {
    'Content-Type': 'application/json',
  },
  // params字段会自动把参数转为查询字符串拼接到url后
  params: searchRecord
};

axios.get('http://localhost:3000/records/owner', config)
  .then(function (response) {
    console.log(JSON.stringify(response.data));
  })
  .catch(function (error) {
    console.log(error);
  })

方案2：兼容后端强制GET带请求体的场景 #

如果后端确定要求GET请求必须携带JSON格式请求体，使用Axios通用请求写法，不要用axios.get别名：

var searchRecord = {
  owner: 'wxTWH8zqSwaIXPAVsjZoRCkvjx73',
  date: '2021-09-02',
};

axios({
  method: 'get',
  url: 'http://localhost:3000/records/owner',
  headers: {
    'Content-Type': 'application/json',
  },
  // 用data字段传递请求体，不要用body
  data: searchRecord
})
.then(function (response) {
  console.log(JSON.stringify(response.data));
})
.catch(function (error) {
  console.log(error);
})

注意：GET请求携带请求体不符合HTTP规范，部分反向代理、CDN服务会默认丢弃GET请求的请求体内容，后续可能出现不可预知的问题，建议优先和后端协商改为POST请求接收查询参数，或者接受查询字符串传参。

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