axios 发 post 请求,后端接收不到参数的原因及解决方案

原因:

         使用axios请求数据时,我们的 Content-Type 变成了 application/json;charset=utf-8

然后,因为我们的参数是 JSON 对象,axios 帮我们做了一个 stringify 的处理。

而且查阅 axios 文档可以知道:axios 使用 post 发送数据时,默认是直接把 json 放到请求体中提交到后端的。

那么,这就与我们服务端要求的 'Content-Type': 'application/x-www-form-urlencoded' 以及 @RequestParam 不符合。


三种解决方案

第一种方法解决:使用transformRequest,在请求发送前将请求数据进行转换

第二种方法解决:如果使用模块化开发,可以使用qs模块进行转换

    使用qs(推荐)

    首先在你的项目里安装qs模块:

    npm install qs --save-dev

    然后在需要使用的页面引入一下:

    import qs from 'qs';

这个qs包一般你安装axios就自带了

如果没有的话就自行cnpm install安装下

将请求数据转换为form-data格式


第三种方法解决

URLSearchParams实例可以当作POST数据发送,所有数据都会URL编码,但是URLSearchParams的兼容性并不高,所有用的时候还需要注意一下

数据变成了类json进行传输而且数据请求的方式也发生了变化,上面变成了Request Payload

这个时候数据无法解析成title:眼镜这样的字段

可以用URLSearchParams()解决

你可能感兴趣的:(axios 发 post 请求,后端接收不到参数的原因及解决方案)