requst payload和query string parameters

很多人经常遇到这个问题,自己明明发起了post请求,为什么参数还是拼接在在了api端口后面,而且参数不是requst payload而是query string parameters。排查半天找不到其实很简单,往往是最简单的最有迷惑性

在使用某些 HTTP 库(如 Axios)时,params 会将参数拼接到 URL 上(变成 Query String),而 data 才是放在请求体(Request Payload)里的。

✅ 正确做法:

js 复制代码
axios.post('/api/endpoint', {
  name: 'Alice',
  age: 25
})
// 或显式指定 data
axios({
  method: 'post',
  url: '/api/endpoint',
  data: {    // ←←← 这里放请求体内容(Request Payload)
    name: 'Alice',
    age: 25
  }
})

❌ 错误做法(变成了 Query String):

js 复制代码
axios({
  method: 'post',
  url: '/api/endpoint',
  params: {  // ←←← 这会变成 /api/endpoint?name=Alice&age=25
    name: 'Alice',
    age: 25
  }
})

💡 新手常见误区

属性 效果 属于
params 参数加到 URL 上,成为 ?key=value&... Query String Parameters
data 参数放到请求体中 Request Payload(POST/PUT 数据主体)

🔑 所以:POST + data = 真正的 Request Payload


🚫 别再犯:

  • POST 请求用 params 发主要数据 ❌- 后端用 req.body 却前端用 params
  • 看请求时只关注方法不看 payload / query ❌

✅ 最终建议:

如果你的 POST 请求需要传数据到 Request Payload

就用 .post(url, data) 或者 { data: ... }别用 params

相关推荐
wuhen_n21 小时前
Promise与async/await
前端
LYFlied21 小时前
前端路由核心原理深入剖析
前端
用户190176844786521 小时前
vue3规范化示例
前端
用户190176844786521 小时前
Git分支管理与代码合并实践:保持特性分支与主分支同步
前端
哈__21 小时前
React Native 鸿蒙跨平台开发:下拉刷新功能
javascript·react native·react.js
没有鸡汤吃不下饭21 小时前
前端打包出一个项目(文件夹),怎么本地快速启一个服务运行
前端·javascript
liusheng21 小时前
Capacitor + React 的 iOS 侧滑返回手势
前端·ios
CUYG21 小时前
v-model封装组件(定义 model 属性)
前端·vue.js
子洋21 小时前
基于远程开发的大型前端项目实践
运维·前端·后端
用户350201588474821 小时前
基于react-routet v7 的配置式 + 约定式路由系统 第一步:引入react-routerv7
前端