vue post请求时接口接收不到参数问题的解决

问题场景

vue项目中发送post请求，请求体里已发送请求参数，接口却没有接收到参数，导致接口报错

一般情况post请求传参方式

一般情况下基于axios发送的post请求，以对象格式传递参数即可， data为{} 格式的参数

export function convert2Html(data) {
      return request({
        url: URLS.convert2Html,
        method: 'post',
        data
      })
    }

找到原因

最后发现 出问题的接口 后台对参数的处理使用了get请求参数的方式，需要将请求参数拼接到url后面才能请求成功（一般get才是参数拼接都url后面，后台没有按标准格式来，导致前端除了问题） 修改接口请求为下面的方式：

export function convert2Html(data) {
  return request({
    // 参数传递过来仍是对象格式，使用qs.stringify格式化成拼接模式
    url: `${URLS.convert2Html}?${qs.stringify格式化成拼接模式(data)}`,
    method: 'post'
  })
}

vue项目中get和post的处理

1.get请求的参数是拼接在url后面的，一般vue中通过request插件封装请求方法时，会使用qs.stringify()方法把对象格式的采纳数转换成“&xxx=abc&xxx2=def”格式的字符串，然后拼接在url后面

return request({
   url: `${URLS.saveCourseBrowser}?${qs.stringify(data)}`,
   method: 'get'
 })

2.post请求的参数一般放在请求体里，只要后台也按这种方式处理，直接以对象格式传递即可

最后

这个问题以前也遇到过，但没有搞清楚原因，这次记录下来 以后有个参考

本文使用 mdnice 排版