如何在axios中使用GET方法携带请求体？后端采用express.js+sequelize

问题根因 #

GET请求携带请求体本身不符合HTTP语义和普遍的服务端、客户端默认实现，你遇到404的原因是：

1. 浏览器环境下，axios发送GET请求时默认不会携带data字段对应的请求体，即便你手动配置，多数浏览器也会主动丢弃GET请求的请求体内容
2. Express默认的请求体解析中间件不会处理GET请求的请求体，即便请求带了body，req.body也会是空对象，你代码里拿到的category是undefined，查询不到对应数据自然返回404
3. Postman属于桌面端HTTP客户端，不会遵循浏览器的限制，所以你用Postman发送GET加body可以正常执行

可选解决方案，按推荐度排序： #

1. 最优方案：将参数放到GET查询串中（符合HTTP语义）

GET请求本来就被设计为通过URL查询参数传递筛选条件，改动量很小：

• 前端代码修改：把data字段替换为axios的params字段，axios会自动把参数拼接到URL后作为查询参数

const test = "woman";
axios({
  method: "GET",
  url: "http://localhost:3001/api/v1/product",
  params: { category: test },
})
  .then((value) => console.log(value))
  .catch((error) => console.log(error.response));

• 后端代码修改：只需要把参数取值源从req.body改成req.query即可，其余逻辑完全不变

// 原代码：const { category } = req.body;
const { category } = req.query;

2. 次选方案：改为POST请求

如果你不想改动参数传递方式，直接把请求方法改成POST即可，改动量同样很小：

• 前端把axios的method改为"POST"
• 后端把对应路由的监听方法从app.get改成app.post
• 其余前后端代码完全不需要调整，请求体可以正常解析

3. 不推荐方案：强制让GET支持请求体

需要同时修改axios配置、Express请求体解析规则，且存在代理服务器、CDN丢弃GET请求体的上线风险，完全不建议生产环境使用。

内容的提问来源于stack exchange，提问作者Muhammad Haekal