前端js ajax或axios封装请求形式为Request Payload的数据问题

忘是亡心i 2023-02-18 14:21 15阅读 0赞

问题：对接过程中使用postMan或者其他工具在对接的时候发现请求中使用的是Request Payload，对于一个有工作经验但是没有主动去配置axios的来说，确实是需要查资料的，开发过程中与后端人员对接接口一直对接不成功，问题在于前端架构师没有配置。

问题现象：在开发过程中，我们请求一直如下图所示,请求方式有post和get,但我们请求的Content-Type一直是如下图所示的（Content-Type: application/x-www-form-urlencoded;charset=UTF-8），数据都是以form Data方式去请求。忽然一个接口 如下图二所示，Content-Type以application/json（Content-Type: application/json）形式去传，数据以Request Payload的形式来传，导致出现接口调试失败！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]  
图一 formData形式传数据

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 1]  
图二 request Payload方式传数据

解决方法：  
1，前端在请求接口的封装中，添加headers,如下所示,其中useRequestBody 是我自己封装的字段，param是一个对象

export function GetDataList (param) {
      return request({
        url: '/search/getRecomsByEs',
        method: 'POST',
        data:param,
        headers: {
          'Content-Type': 'application/json;charset=UTF-8'
        },
        useRequestBody:true
      })
    }

2，在axios拦截器中进行修改，useRequestBody是自己封装的，如上代码

http.interceptors.request.use((config) => {
      if (config.method === 'post') {
        if(config.useRequestBody){
          config.headers = {
            'Content-Type': 'application/json;charset=UTF-8'
          }
        }else {
          config.data = qs.stringify(config.data);
        }
    
      }else {
        console.log("config====",config);
    
      }
      return config
    }, (error) => {
      console.log(error)
      return Promise.reject(error)
    })

最后，修改之后，请求成功  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200618122318495.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200618122704329.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200618123757460.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ==,size_16,color_FFFFFF,t_70