webpack proxyTable的post的body传递为空

Question

devServer:
    proxy: {
      '/api/sys-users': {
            target: 'http://localhost:9746',
            changeOrigin: true
       }
   
    }
}

export function addUser(data) {
  return request({
    url: '/api/sys-users',
    method: 'post',
    data
  })
}


addUser({userName: "xxx"});

后端日志，可以看到body为空

2020-06-29 23:50:34.335 DEBUG 321096 --- [nio-9746-exec-1] o.a.coyote.http11.Http11InputBuffer      : Received [POST /api/sys-users HTTP/1.1
x-forwarded-host: localhost:9528
x-forwarded-proto: http
x-forwarded-port: 9528
x-forwarded-for: 127.0.0.1
cookie: Idea-5e0a9e30=439a546c-def9-4e23-b702-8d8400fb0822; yjs_id=TW96aWxsYS81LjAgKFdpbmRvd3MgTlQgMTAuMDsgV2luNjQ7IHg2NCkgQXBwbGVXZWJLaXQvNTM3LjM2IChLSFRNTCwgbGlrZSBHZWNrbykgQ2hyb21lLzc5LjAuMzk0NS44OCBTYWZhcmkvNTM3LjM2fGxvY2FsaG9zdDo3NjUzfDE1ODY1ODEyMjk4NTh8; Hm_lvt_a52ec7be79d680a5eb70b1d8d57655f3=1586519471,1586582992,1587123752,1588259742; Hm_lvt_728af2dbf67a179a63b664ec04053473=1586519471,1586582993,1587123752,1588259743; Hm_lvt_0ab1f970a0b36e24c52dbc81714f049d=1587044726,1588522010; wp-settings-time-1=1588522070; otary_token=Bearer%20eyJhbGciOiJIUzUxMiJ9.eyJpYXQiOjE1OTM0NDUwODAsInN1YiI6ImFkbWluIiwicm9sZXMiOiIiLCJleHAiOjE1OTQwNDk4ODB9.j3jkFzku_FXIt8gGwA839wHF0gfbvCvhOvGdTs8zjFYRBwqDixAEeaJVmMZiVWcll4dgYfLCyNl_UqK44RgZXQ; JSESSIONID=7525C1A3C53193047031D17524489930
accept-language: zh-CN,zh;q=0.9,en;q=0.8,ja;q=0.7
accept-encoding: gzip, deflate, br
referer: http://localhost:9528/
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: same-origin
origin: http://localhost:9528
content-type: application/json;charset=UTF-8
user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36
authorization: Bearer eyJhbGciOiJIUzUxMiJ9.eyJpYXQiOjE1OTM0NDUwODAsInN1YiI6ImFkbWluIiwicm9sZXMiOiIiLCJleHAiOjE1OTQwNDk4ODB9.j3jkFzku_FXIt8gGwA839wHF0gfbvCvhOvGdTs8zjFYRBwqDixAEeaJVmMZiVWcll4dgYfLCyNl_UqK44RgZXQ
accept: application/json, text/plain, */*
content-length: 317
connection: close
host: localhost:9746

]

如上所示，配置后，使用axios的post请求，body的参数无法传递到后台，body是空的，请问要怎么解决？

后台已经用postman测试过了，可以成功，后台开启debug日志，发现前端传送过来的请求的body是空的，但前端不知道为什么body会是空的?

前端请求抓包如下，感觉是没问题的，所以我怀疑是proxyTable转发导致的body丢失，前端小白，求各位大神指教，什么情况下会导致body丢失

后端代码如下

@PostMapping
@ApiOperation("新增用户")
public void add(@RequestBody SysUserParamDto sysUserParamDto) {
   sysUserService.insert(sysUserParamDto);
}

使用了底下的解决方案，依然不行，只要涉及到body的请求都报错，不知道为什么就是body参数接收不到，其它的查询、删除接口都正常

Answer 1

axios有两个特性：

• 转换请求数据和响应数据
• 自动转换 JSON 数据

那么 post 请求的时候，我们的传参是 data: {...} 或者直接 {...} 的形式传递的，这两种形式无一例外都触发了 axios 源码中的JSON.stringify(data)这个关键代码。

问题分析

也就是说，我们的 Content-Type 变成了 application/json;charset=utf-8 
然后，因为我们的参数是 JSON 对象，axios 帮我们做了一个 stringify 的处理。 
而且查阅 axios 文档可以知道：axios 使用 post 发送数据时，默认是直接把 json 放到请求体中提交到后端的。

那么，这就可能与服务端要求的 'Content-Type': 'application/x-www-form-urlencoded'不符合。

方案一：
设置请求头：{headers:{'Content-Type':'application/x-www-form-urlencoded'}}
data数据转换一下：Qs.stringify(data)，Qs需求引用下

方案二：
我们也可以通过修改 transformRequest 来达到我们的目的。

import Qs from 'qs'
axios({
    url: '/api/sys-users',
    method: 'post',
    transformRequest: [function (data) {
        // 对 data 进行任意转换处理
        return Qs.stringify(data)
    }],
    data: {
        username: 'admin',
        pwd: 'admin'
    }
})

方案三：
【用 URLSearchParams 传递参数】，需要注意的是： URLSearchParams 不支持所有的浏览器，但是总体的支持情况还是 OK 的，所以这种可以选择

Answer 2

使用 Qs.stringify

export function addUser(data) {
  return request({
    url: '/api/sys-users',
    method: 'post',
    data: Qs.stringify(data)
  })
}

Answer 3

axios封装（问一下后端接收的数据格式是什么）

// 配置post请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

// 发送请求
export function post(url, params) {
  return new Promise((resolve, reject) => {
      axios({
        method: 'post',
          url:url,
          data: params,
          paramsSerializer: function (params) {
            return qs.stringify(params, {arrayFormat: 'repeat'})
            // return params
          },
      }).then(
        res=>{
          resolve(res.data)
        },err=>{
          reject(err.data)
        }
      ).catch(err=>{
        reject(err.data)
      })
  })
}