axios 使用data方式传递参数，后端接受不到

墨蓝 2021-07-26 21:26 779阅读 0赞

最近做vue项目，做图片上传的功能，使用get给后台发送数据，后台能收到，使用post给后台发送图片信息的时候，  
[vue axios post请求发送图片base64编码给后台报错HTTP 错误 414][vue axios post_base64_HTTP _ 414]  
请求一直报错，显示 ***request URI too large***  
后台显示一直没有收到数据 参数为null。网上查看了很多资料，才知道axios post传参的问题

axios({
        method: 'post',
        url: '/api/lockServer/search',
        params:{
            "username": "test",
            "psd": "123456"
        } 
    })

一开始我是这么写的 ，post里面的数据放在params里面，这样是有问题的，在使用axios时，要注意到配置选项中包含params和data两者，以为他们是相同的，实则不然。   
因为params是添加到url的请求字符串中的，用于get请求。  
而data是添加到请求体（body）中的， 用于post请求。

然后我把params改为了data，后台还是接收不到，查阅了很多资料，需要把Content-Type为application/x-www-form-urlencoded，  
jquery在执行post请求时，会设置Content-Type为application/x-www-form-urlencoded，所以服务器能够正确解析，而使用原生ajax、axios请求时，如果不显示的设置Content-Type，那么默认是text/plain，这时服务器就不知道怎么解析数据了，所以才只能通过获取原始数据流的方式来进行解析请求数据。

**解决办法：**

使用qs封装参数，加上请求头

import Qs from 'qs'
    let data = {
        "username": "test",
        "psd": "123456"
    }
    
    axios({
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        method: 'post',
        url: '/api/lockServer/search',
        data: Qs.stringify(data)
    })

[vue axios post_base64_HTTP _ 414]: https://segmentfault.com/q/1010000012611121