花了一天时间就解决了一个的请求头传参参数格式bug

342 阅读2分钟

一天的时间就解决了一个bug就这么过去了,但不能让他就这么过去了,加班要加的有价值,所以现在记录一下这一天的经历,以防下次再踩坑

大致说下我的情况,入坑的不久的前端新手,在做一个项目的重构,用的框架式vue。对自己不是很自信,所以出了bug总会以为是自己的问题,首先会找自己原因,更别说在和一个工作好几年的后端和合作的时候。

事情是这样的,和后端联调一个接口,报了500的错误,完事,服务器错误,扔给后端解决就好了,后端改了一会之后说好了,然后我就试了下还是500,然后后端一个截图扔过来,他自己用postman调通了,但是我这调还是500(向后端确认问题说我参数没有传过去,后确认了传参方式没错,甚至在请求头和body都传了参数了)~ 我这就懵了,传的参数跟调用时传后端一模一样,为什么我就不行呢,调的是同一个接口,传参的方式没错(甚至在请求头和body都传了参数了,不管他用@requestParam还是@requestBody应该都能接收到参数),但是他就是接收不到我的参数

百思不得其解之际,后端给了个之前项目的测试地址,说他的接口都没有变,以前的就能调通,我咋就调不通呢,我真的是陷入了对自己深深的怀疑,然后就逐行对比,发现是请求头的参数格式不一致导致的。

我的请求头content-type: application/json

而后端扔的图片请求头Content-Type:application/x-www-form-urlencoded

遂找原因,原来vue+axios默认请求头就是json格式的,找到原因那就好改了,改下请求头应该就好使了

return axios({
    url: '',
    method: 'POST',
    data: param,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  })

完事之后再对比下参数格式,后端给的图片是json格式的,而axios的qs包自动将参数转为了string格式,那简单,再转回来就好了

function saveRecruit (parameter) {
  const param = new URLSearchParams()
  for (const key in parameter) {
    if (parameter[key]) param.append(key, parameter[key])
  }
  return axios({
    url: '',
    method: 'POST',
    data: param,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  })
}

至此,再调接口,终于返回200了~~