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会是空的?

回答

使用 Qs.stringify

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

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 的,所以这种可以选择

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Scroll Up